Change paper color Material-UI

Question

I'm developing a React project using the material-ui library. I'm currently trying to add a drawer which is working fine for me. However, I'm trying to change the background color of this drawer. I've heard that the way to do this is by changing the color of the drawer's paper. I've tried adding the following tag to my CSS object:

const styles = theme => ({
    background:"BLUE"

Then I reference this object in my render function using the classNames library:

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

However, when I run this on localhost, the paper is still a plain old white. Am I missing something about the classNames library or is a special case of the paper tag? Thanks in advance and let me know if I should supply more info than this.

Ryan Cogswell · Accepted Answer · 2019-04-07T01:25:35.620

You have a couple issues in the code shown in your question.

For your styles, you need something more like the following:

const styles = theme => ({
    drawerPaper: { background: "blue" }
});

In this case, "drawerPaper" is the key for my class name and then the object to the right contains the CSS properties for that class. When passed into withStyles, this will generate CSS like the following:

<style>
.classname-generated-for-drawerPaper-key: {
  background: blue;
}
</style>

You had a class name key of "background" with the string "BLUE" as the CSS properties which will end up with CSS like the following:

<style>
.classname-generated-for-background-key: {
  0: B;
  1: L;
  2: U;
  3: E;
}
</style>

which of course is not valid CSS and will have no effect on the paper.

The second issue is in how you specify the classes:

    classes = {{
        paper: classNames({
            background:classes.background,
            [classes.drawerOpen]: this.state.open,
            [classes.drawerClose]: !this.state.open
        })
    }}

When you pass an object to classNames, the keys of the object are the class names and the associated value controls (based on whether it is falsey or truthy) whether the class name should be included. With the syntax you used, classes.background will always be truthy which means that the class "background" (rather than the generated class name in classes.background) will be included which will have no effect since a "background" class hasn't been defined.

Instead you should have:

    classes = {{
        paper: classNames(classes.drawerPaper, {
            [classes.drawerOpen]: this.state.open,
            [classes.drawerClose]: !this.state.open
        })
    }}

which will unconditionally include classes.drawerPaper.

Here is a modified version of one of the Drawer demos, but with the background color of the drawer changed to blue: https://codesandbox.io/s/wqlwyk7p4l

Hey Ryan, All of this makes sense with the exclusion of replacing ```background: classes.background,``` with ```[classes.drawerPaper],``` as I'm gedtting the error message saying that comma is an unexpected token. — Sean, Apr 07 '19 at 00:26

score 1 · Answer 2 · answered Feb 20 '23 at 11:14

If you're using global theme = createTheme( the color of a background paper can be set as following

const theme = createTheme({
   palette: {
   {
      primary: colors.blue,
      background: {
         default: colors.grey[50],
         paper: colors.common.white,
      },
      // ...

Change paper color Material-UI

2 Answers2