MUI Drawer set background color

Question

How to simply set background color of MUI Drawer? tried this, but doesn't work

<Drawer    style={listStyle3}   open={this.state.menuOpened}   docked={false}   onRequestChange={(menuOpened) => this.setState({menuOpened})} />  const listStyle3 = {   background: '#fafa00',   backgroundColor: 'red' } 

Answer 1

Edit: (May-21) - Material UI V4.11.1
This can be done differently in version 4.11.1 and functional components.
There's no need to use an HoC anymore. Here's how it's done:
You should use the makeStyles helper to create the hook with a definitions of the classes and use the hook to pull them out.

const useStyles = makeStyles({   list: {     width: 250   },   fullList: {     width: "auto"   },   paper: {     background: "blue"   } });  const DrawerWrapper = () => {  const classes = useStyles();   return (      <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>     ) } 

Here's a working sandbox

---

Edit: (Jan-19) - Material UI V3.8.3
As for the latest version asked, the way to configure the backgroundColor would be by overriding the classes.
Based on material-ui documentation here, and the css api for drawer here - This can be done by creating an object in the form of:

const styles = {   paper: {     background: "blue"   } } 

and passing it to the Drawer component:

 <Drawer       classes={{ paper: classes.paper }}       open={this.state.left}       onClose={this.toggleDrawer("left", false)}     > 

A working example can be seen in this codesandbox.
Don't forget to wrap your component with material-ui's withStyles HoC as mentioned here

---

Based on the props you used I have the reason to think that you're using a version which is lower than v1.3.1 (the last stable version) but for the next questions you'll ask, I recommend writing the version you're using.

For version lower than V1, you can change the containerStyle prop like this:

<Drawer open={true} containerStyle={{backgroundColor: 'black'}}/>

Answer 2

In MUI v5, you can use the sx prop to style MUI components:

<Drawer   PaperProps={{     sx: {       backgroundColor: "pink",       color: "red",     }   }} 

Or use styleOverrides to define the custom styles in createTheme:

const theme = createTheme({   components: {     MuiDrawer: {       styleOverrides: {         paper: {           backgroundColor: "pink",           color: "red",         }       }     }   } });