Changing color of Drawer in MUI v5

Question

I'm using MUI v5 in my project and trying to apply styling to a Drawer so that the background color is black. Since this update was pretty recent I can't find much info on changing the styling of the component without using deprecated elements from MUI v4. Any tips for this? I would also appreciate some advice on applying a color that I've defined using createTheme from MUI as well.

import React from "react";
import {
  Divider,
  Drawer,
  ListItem,
  ListItemButton,
  ListItemIcon,
  ListItemText,
} from "@mui/material";
import AddIcon from "@mui/icons-material/Add";
import SearchIcon from "@mui/icons-material/Search";
import HomeIcon from "@mui/icons-material/Home";
import qdjLogo from "../../assets/qdj_logo.png";
import "./styling/SideBarStyling.css";
import ProfileFooter from "./ProfileFooter";

function Sidebar() {
  return (
    <div>
      <Drawer variant="permanent" anchor="left">
        <div className={"wrapper"}>
          <a href="">
            <img className={"icon"} src={qdjLogo} alt="QDJ Logo" />
          </a>
        </div>
        <ProfileFooter />
      </Drawer>
    </div>
  );
}

export default Sidebar;

NearHuscarl · Answer 1 · 2021-10-10T17:04:01.067

You can change the background color of the Drawer by styling the Paper component inside it using the sx prop:

<Drawer
  PaperProps={{
    sx: {
      backgroundColor: "pink"
    }
  }}
  {...}
/>

If you want to set the background-color to black, maybe you want a dark theme? You can configure MUI theme to automatically set the dark background for Paper by setting the dark mode like this:

const theme = createTheme({
  palette: {
    mode: "dark"
  }
});

<ThemeProvider theme={theme}>
  <Content />
</ThemeProvider>

Reference

https://mui.com/guides/migration-v4/#migrate-from-jss

score 3 · Accepted Answer · answered Oct 10 '21 at 17:01

3

You can simply override the theme like this:

const theme = createTheme({
  components: {
    MuiDrawer: {
      styleOverrides: {
        paper: {
          background: "orange"
        }
      }
    }
  }
});

Here is a sandbox

answered Oct 10 '21 at 17:01

Domino987

8,475
2
15
38

score 0 · Answer 3 · answered Jun 25 '23 at 22:57

If you change the color of Paper to change the background, you may not be able to pull down the drawer when you touch it.

Another way is changing backdrop props.

<Drawer
  anchor="bottom"
  open={open}
  onClose={() => setOpen(false)}
  slotProps={{
    backdrop: {
      sx: {
        backgroundColor: 'rgb(255 255 255 / 50%)',
      }
    }
  }}
>
  <YourComponent />
</Drawer>

Changing color of Drawer in MUI v5

3 Answers3

Reference