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
Yes. The root element of the Drawer component is a div with MuiModal-root class.
The MUI Drawer contains a nested Paper component by default. Drawer content is inside this Paper component, so pass style customizations to Drawer’s PaperProps.
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>
);
}
Thanks it was helpfull.
You are welcome!