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 inside the Box component if you need that information instead.

***UPDATE for MUI 5: Material-UI moved to a new styling API where styling is applied using the sx prop. If you are using MUI v5, simply write the styling code directly in the sx prop instead of using makeStyles and classes. I’m working on updating all my articles, but until I’m finished you can read my guide to the MUI sx prop to learn more.

The Code Sandbox link with full React code is in the Resources section.

Material-UI Box Background Color

Background color and other stylings can be applied to the Box component simply by adding a class:

//styles
boxBackground: {
  backgroundColor: "blue",
  color: "green",
  fontSize: 30
}

//JSX
<Box
  component="span"
  m={4} //margin
  p={4} //padding
  boxShadow={12}
  className={`${classes.box} ${classes.boxBackground}`}
>

With some MUI components, specialized selectors are needed even for simple tasks such as applying background color. The Box component usually does not need such sophisticated selectors.

However, if you do have a reason to select based on default classes applied to the Box component, you can make select the .MuiBox-root class. You can see it in the dev tools screenshot below:

Material-UI Box Breakpoints

There are several ways to provide breakpoints in JSS to a class in Material-UI. In this example, I make use of the default theme breakpoints in order to apply different background color to the Box component at different screen widths:

boxBreakpoints: {
  [theme.breakpoints.up("xs")]: {
    backgroundColor: theme.palette.primary.main
  },
  [theme.breakpoints.up("sm")]: {
    backgroundColor: theme.palette.secondary.main
  }
}

Try resizing the screen in the Code Sandbox to see the effects.

You can also use media queries to provide breakpoints to the Box component. Take a look at the link above the code for examples.

Material-UI Box Component with Shadow

(Here’s how to add box-shadow to MUI components)

The Box component makes use of the built-in box shadow system in Material-UI. There are 25 shadow variants built in and you can add your own.

The code is simple for adding box shadow to Boxes. Simply add the following prop: boxShadow={12}. The possible values range from 0 to 24. The higher the value, the darker and longer the shadows.

In my Code Sandbox example, you can see the shadow around the top Box. By default, the shadow is darker at the bottom and lighter on the sides and top.

Material-UI Box Padding and Margin Shorthand

Box margin and padding can be added with the m and p props. These simply take a number that translates to a pixel value. The margin or padding gets exponentially larger as the prop value increases.

The values m={4}, p={4} translate to margin and padding of 32px, which is what I used in my example. It is important to remember that styling applied by class will overwrite styling applied through these two props.

Material-UI Box Hover

The Box component’s hover pseudo-class can be targeted with a bit of JSS:

box: {
  "&:hover": {
    backgroundColor: "pink"
  }
}

Notice there is no space between the & and the colon. This means that the element with both box and hover pseudo-class is selected.

As an experiment, I added hover another way:

root: {
  "& span:hover": { backgroundColor: "orange" }
}

The root class is on a div that wraps both Box components in my demo. The first Box is passed prop component: 'span'. This creates the Box as a span instead of a div (the default).

In my selector, I target only spans with a hover pseudo-class. This means that only Boxes created as spans (not divs) will have backgroundColor: "orange".

Resources

Additional useful posts:

• Here’s how to style the box component using breakpoints.
• The Ultimate Guide to MUI Box onClick (With TypeScript)

My MUI course on Udemy is now available!!! Build a full MUI app from beginning to end, learn every aspect of the sx prop, styled API, and the theme, and tackle the most challenging components! Do you want an active Q&A with me?!? Check here for coupons for my MUI course on Udemy.

Code Sandbox Link