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;