Sometimes, we want to set the background color of the Material UI drawer.

In this article, we’ll look at how to set the background color of the Material UI drawer.

How to set the background color of the Material UI drawer?

To set the background color of the Material UI drawer, we call the makeStyles function to create the styles.

Then we can apply the styles with the useStyles hook returned by makeStyles.

For instance, we write:

import React, { useState } from "react";
import { makeStyles } from "@material-ui/core/styles";
import Drawer from "@material-ui/core/Drawer";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import Button from "@material-ui/core/Button";

const useStyles = makeStyles({
  list: {
    width: 250
  },
  fullList: {
    width: "auto"
  },
  paper: {
    background: "blue"
  }
});

const DrawerWrapper = () => {
  const classes = useStyles();
  const [isOpen, setIsOpen] = useState();
  const sideList = (
    <div className={classes.list}>
      <List>
        {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => (
          <ListItem button key={text}>
            <ListItemText primary={text} />
          </ListItem>
        ))}
      </List>
    </div>
  );

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open Left</Button>
      <Drawer
        classes={{ paper: classes.paper }}
        open={isOpen}
        onClose={() => setIsOpen(false)}
      >
        <div
          tabIndex={0}
          role="button"
          onClick={() => setIsOpen(true)}
          classes={{ root: classes.root }}
        >
          {sideList}
        </div>
      </Drawer>
    </>
  );
};

export default function App() {
  return (
    <div>
      <DrawerWrapper />
    </div>
  );
}

We call makeStyles with an object that has the properties set to objects with the styles.

We set the background property to 'blue' to apply a blue background to a component.

Next, in DrawerWrapper, we call useStyles to return the classes object.

And we use that to make the Drawer‘s background blue by setting classes to { paper: classes.paper }.

We then add the content inside by putting sideList inside the div.

Conclusion

To set the background color of the Material UI drawer, we call the makeStyles function to create the styles.

Then we can apply the styles with the useStyles hook returned by makeStyles.