Javascript – MUI Drawer set background color

javascriptmaterial-uireactjs

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'
}

Best Answer

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'}}/>

Related Topic