How to Customize MUI Drawer Size, Color, and Elevation

The MUI Drawer component has excellent props for customization. Also, the MUI SX prop allows us to style the component precisely as needed. However, it is important to know that we must target the sx prop of the Paper component inside of the Drawer component.

We can pass styling values to the child Paper component using Drawer’s PaperProps. I will use this prop to add text color, background color, width, height, and elevation to the Drawer component.

I previously created a Drawer positioned under an Appbar and another Drawer inside a Container. If you need any help positioning the Drawer or removing the Backdrop, take a look at these posts.

This post uses MUI v5, but if you need styling code for Material-UI v4 you can find it here. Full code for this example is in the Resources section.

How to Change MUI Drawer Width

If you want to customize Drawer width, pass a width value to the Drawer’s PaperProps like this:

<Drawer
  PaperProps={{

    sx: {
      width: 240
    }
  }}
/>

Notice that I did not pass a width value directly to the Drawer’s sx prop.

The Drawer renders an internal Paper component by default (this can be customized). The Paper component is really what sets the size values of the Drawer because it holds the content.

Another option for styling the Drawer’s child Paper component is to use the classes prop on the Drawer and target the paper class. This accesses the Material-UI Classes API.

classes={{ paper: classes.paper }}

I suggest using the sx prop instead for MUI v5. The sx prop uses less boilerplate code and is recommended by the MUI team, even though they maintained support for class-based makeStyles in MUI v5.

How to Change MUI Drawer Height

Customizing Drawer height is similar to styling the width. I will pass a height value to the sx prop within PaperProps.

<Drawer
  PaperProps={{
    sx: {
      width: 240
    }
  }}
/>

Since the child Paper component contains the content, it is also what ‘visually’ renders as the Drawer. We can control Drawer height by customizing the Paper height.

Take a look at the DOM screenshot above. Notice that the root element of the Drawer has class MuiModal-root. If we tried setting height using the Drawer sx prop, it would customize this root element instead of the visible Paper element.

How to Change MUI Drawer Text Color and Backgound Color

Since a Paper component is nested inside the Drawer by default, and it contains all the Drawer’s visual content, we need to customize the Paper’s color prop in order to change Drawer text color:

<Drawer
  PaperProps={{
    sx: {
      color: "rgba(225,249,27,1)"
    }
  }}
/>

How to Change MUI Drawer Background Color

The visible area of the Drawer is a div with MuiPaper-root class on it. Like the styling in the previous sections, we need to pass styling to the Paper’s sx prop in order to set the background color for the Drawer:

<Drawer
  PaperProps={{
    sx: {
      backgroundColor: "rgba(30, 139, 195, 0.8)"
    }
  }}
/>

You can read about styling Table background color here.

How to Change MUI Drawer Elevation

The elevation prop is a shorthand for box shadow styling. It is available on the MUI Box and Paper components.

We can add elevation to the Drawer by passing an elevation prop to the Paper component rendered inside the Drawer component. Learn more about styling the Paper component here.

<Drawer
  PaperProps={{
    elevation: 8
  }}
/>

The elevation prop takes values that range from 0 to 24 and correspond to indexes on the theme.shadow array. The array contains 25 CSS box-shadow values where the larger the value, the stronger the shadow is. Learn about MUI box shadow here.

Notice that we did not have to use the sx prop to apply box shadow since we could do it through the elevation prop.

FAQs

Resources

import Drawer from "@mui/material/Drawer";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import AppsIcon from "@mui/icons-material/Apps";

export default function StyledDrawer() {

  return (
    <Drawer
      open
      PaperProps={{
        elevation: 8,
        sx: {
          width: 240,
          height: 500,
          color: "rgba(225,249,27,1)",
          backgroundColor: "rgba(30, 139, 195, 0.8)"
        }
      }}
    >
      <div>
        <List>
          {["Home", "Page 1", "Page 2", "Page 3"].map((text, index) => (
            <ListItem button key={text}>
              <ListItemIcon>
                <AppsIcon />
              </ListItemIcon>
              <ListItemText primary={text} />
            </ListItem>
          ))}
        </List>
      </div>
    </Drawer>
  );
}