Material-UI Drawer set background color

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


Material UI V4.3.2 As in this version you can change the backgroundColor by making use of makeStyles from '@material-ui/core/styles' as shown below:

import Drawer from '@material-ui/core/Drawer';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  paper: {
    background: 'black',
    color: 'white'
  }
});

const SideDrawer = props => {
  const styles = useStyles();

  return (
    <Drawer
      anchor="right"
      open={props.drawerOpen}
      onClose={() => props.toggleDrawer(false)}
      classes={{ paper: styles.paper }}
    >
      Items
    </Drawer>
  );
};

export default SideDrawer;