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:

Material-UI Box background, shadow, breakpoints, and more

Here’s how to align Buttons inside the Box component if you need that information instead.

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

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:

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.

Box Shadow

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.

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.

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

Are you looking for training in Material-UI? Check out my review of the best Material-UI course in Udemy, which has 40+ hours of content and a 30-day money back guarantee.

Code Sandbox Link

Share this post:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.