How to style and customize MUI components in React applications

MUI is a React component library similar to react-bootstrap and chakra UI libraries. It does not use vanilla CSS to style components in websites or web applications. We can directly import components built by the MUI library into your project.

Overview

Benefits:

• Easy to customize the different components by using themes.
• MUI is based on Google’s UI principles called material design. This makes meeting standards easy.
• MUI supports server-side render compatibility.

Downsides:

• The MUI library cannot specifically design or customize styles from scratch.
• You have to honor the base components and treat the custom components as nested objects.

Styling Components

The MUI library supports a rich selection of components, including but not limited to inputs, navigations, layouts, utils, and so on. When using MUI components in a React application, there are four different ways to style them.

Let’s explore those in the rest of this article.

1. Direct style

Direct style is similar to vanilla CSS which does not apply to many MUI components. Box and Typography are the only ones that use direct styling in React applications. The following code snippet shows direct styling in the MUI Box component. The hover style does not work in direct styling.

        <Box
          fontSize ="2rem"
          bgcolor="#f5f5dc"
          width={500}
          height={300}
          border="solid 5px black"
          color={['yellow', 'primary.main']}
          paddingLeft={5}
          >
            Direct Style
        </Box>

The MUI box element is imported from the MUI library, and we can set the properties directly in the component, as shown in the above example. The font size, background color, length, width, etc., are the same as the typical CSS properties in web development. The color property uses a breakpoint array that directly uses the color from the MUI themes. The padding property is not given in pixels and uses the 5th index of the theme-defined spacing in the MUI library.

2. Inline Style

This styling method includes the standard HTML property styles. There are no breakpoints possible to include in this styling method. The direct styling of the base property, hover, does not work for this style, too, because the base React elements do not have that property. Below is an example of using an inline style in the MUI Box component.

  const inlineStyle   = {
    fontSize :'2rem',
    backgroundColor:"#f5f5dc",
    width:500,
    height:300,
    border:"solid 5px black",
    paddingLeft:5,
  }

  <Box style={inlineStyle}>InlineStyle</Box>

3. sx Style

sx is a prop used in the newer version of the MUI library that we can use to style our components. The same example used in the direct style is used by sx styling.

  const sxStyle ={
    fontSize :'2rem',
    backgroundColor:"#f5f5dc",
    width:500,
    height:300,
    border:"solid 5px black",
    color:['yellow', 'primary.main'],
    paddingLeft:5,
    '&:hover':{borderColor:'blue'},
    transition:(theme: Theme) => theme.transitions.create(['border-color', 'pink' ]),
  };

  <Box sx={sxStyle}>sxStyle</Box>

4. Styled method

All the properties are the same as the direct styling except the hover and transition properties. The hover property is written with the “&:” symbols, and a newer object with different properties is styled with the hover property. The transition property is created using an arrow function that passes the theme as an argument that imports the ‘Theme’ from the MUI library. An array is passed to the create method with the attribute that needs to be styled and the given value. For this example, the border color has given the value as pink.

The styled method is essential, with many pros than direct and inline styling. The developers use the Styled component library MUI uses to style the components, which is also imported initially. The component is needed to be styled passing as the first argument in the Styled method. There can use breakpoints to style the components from the MUI themes. The following code snippets show how to use a styled method in React applications.

  const StyledBox = styled(Box)(({theme}) => ({
    fontSize :'2rem',
    backgroundColor:"#f5f5dc",
    width:500,
    height:300,
    border:"solid 5px black",
    color:theme.palette.primary.main,
    ‘&.Mui-disabled’:{opacity:0.5},
    [theme.breakpoints.down('sm')]:{
      color: 'yellow',
    },
    paddingLeft:theme.spacing(5),
    '&:hover':{borderColor:'blue'},
    transition: theme.transitions.create(['border-color', ‘pink’]),
  }));

<StyledBox>Styled method</StyledBox>

The color of the above example will change into yellow from the primary color when the size is below the small breakpoint. The padding property should also be given in a specific way to address the correct index of the MUI themes.

Specificity

The specificity feature is necessary when designing MUI components. The properties are overriding in a specific order. The below example has given to understand the specificity feature of a Box component’s background color.

  const inlineStyle   = {
    backgroundColor:"red",
  };

  const StyledBox   = styled(Box)(()=>({
    backgroundColor:"green",
  }));

  const sxStyle   = {
    backgroundColor:"brown",
  };

<StyledBox bgColor=”orange” style={inclineStyle} sx={sxStyle}> </StyledBox>

The inline style has the most significant specificity property, and the background color of the Box component will display as red. The background color will change to brown next when the ‘style’ property is removed from the above Styledbox component. The background color takes the StyledBox method’s color when there is no either style or sx property inside that component. Direct styling is applied last because it has the least specificity property.

To recap, here’s the order of importance when styling MUI components with more than one style:

1. Inline
2. Styled
3. sx
4. Direct Styling

Summary

When creating fluid and dynamic websites and web applications, you want to move some of the styling logic from the app itself into the MUI components using the Styled method.

This helps you build powerful and immersive web experiences very quickly.