How To Style The Material-UI Box Component

The Material-UI Box component is an excellent utility component for wrapping child components. With a bit of guidance, it is easy to precisely style and position the MUI Box. In this example, I’ll take two box components and apply a variety of styling to them as shown in the image: Here’s how to align Buttons … Read more

Material-UI makeStyles, useStyles, createStyles, and withStyles Explained

Styling hooks in Material-UI are an effective and exceptional tool for customizing components. However, the similarly-named hooks can be confusing to use. In this post, I’ll explain what each hook does, when to use it, and which hooks are recommended for certain situations. Code Sandbox with full React code is in the Resources section. Material-UI … Read more

Four Examples of Border Radius in Material-UI

A default design pattern in Material-UI is to create rounded corners with border radius. There are several ways to customize border radius ‘once’ and to have it globally available: Creating a custom theme and globally overriding a component type’s borderRadius style value Creating a custom theme and changing the value of shape.borderRadius Creating a StyledComponent … Read more

How to Align Material-UI CardActions

CardActions in Material-UI are generally used to add components to the bottom of a Card. These are often icons wrapped in an IconButton. You may have several of these action components and need to align them precisely as desired. That can be done easily either with flex or margin, and we will explore examples of … Read more

Four Examples of Using Material-UI CardMedia

Material-UI’s Card component has an aptly named composite component named CardMedia. As you likely guessed, it is intended to contain various kinds of media: video, audio, image, picture, and iframe. The CardMedia component is most commonly used for images, according to my keyword research. That’s not a surprise, but I still thought it would be … Read more

Material-UI Card Header With Every Prop Enabled and Explained

Material-UI Card Header With All Props Enabled

The Material-UI Card Header component is a versatile component that can make Card layouts look great. Naturally I wondered: what does a Card look like with every single prop enabled? There are nine total props on the card header; I’ve actually only enabled eight of them because the disableTypography prop actually turns off two other … Read more

How to Use Material-UI’s Flexbox System

The flexbox module is a direction agnostic layout system made for managing the layout of a component. Flex is designed for optimizing layout when available space is unknown or dynamic. The flexbox layout includes props set on both parent and children elements to control child size and order. Read an incredibly detailed overview of the … Read more

How to Extend Material-UI Typography With Strikethrough, Font Size, Spacing, and Color

The Typography component is critical for a consistent UI. This article explores how to customize the Typography component through extending the theme.typography object, creating a Typography Styled Component, and overriding the MuiTypography base class. Specifically, I will add strikethrough (textDecoration: “line-through”), font style, letter spacing, and font size to the Typography component and using the … Read more

How to Style Material-UI Tabs and Tab Indicator (Plus TypeScript)

React Material UI Tabs Example

Material-UI Tabs are a handy component for easy navigation with out-of-the-box styling. However, sometimes that styling is more than we need. In this Tab Panel example, we will disable the indicator (the underline at the bottom of the Tab just above the shadow) and instead add our own styling. We will style Material-UI’s Tabs with … Read more