I'm in the process of creating a React project using the material-ui library. Currently, I am facing an issue with customizing the drawer component's background color. After some research, I learned that modifying the paper attribute of the drawer should do the trick. Here is the code snippet I tried adding to my CSS object:
const styles = theme => ({
background: "BLUE"
Subsequently, in my render function, I utilized the classNames library to reference this object:
render() {
const { classes } = this.props;
return (
<div className={styles.root}>
<CssBaseline />
<Drawer
variant="permanent"
className={classNames(classes.drawer, {
[classes.drawerOpen]: this.state.open,
[classes.drawerClose]: !this.state.open
})}
classes={{
paper: classNames({
background: classes.background,
[classes.drawerOpen]: this.state.open,
[classes.drawerClose]: !this.state.open
})
}}
/>
</div>
);
}Despite all this setup, when I previewed it on localhost, the paper remained white and didn't reflect the desired blue color. Is there something specific about how classNames or the paper tag work that I might have overlooked? Any additional insights or guidance would be greatly appreciated. Thank you!