Javascript 更改纸张颜色材质界面

我正在使用MaterialUI库开发一个React项目。我目前正在尝试添加一个抽屉，这对我来说很好。然而，我正试图改变这个抽屉的背景色。我听说这样做的方法是改变抽屉纸的颜色。我已尝试将以下标记添加到CSS对象：

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

然后，我使用类名库在渲染函数中引用此对象：

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

render（）{
const{classes}=this.props；
返回(
问题中显示的代码中有几个问题

对于您的样式，您需要以下内容：

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

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

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

在本例中，“DroperPaper”是我的类名的键，然后右边的对象包含该类的CSS属性。当使用样式传递到
时，将生成如下CSS：

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

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

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

当您将对象传递给
类名
时，对象的键是类名和相关的值控件（基于是否为Falsy或truthy）是否应包含类名。根据您使用的语法，
classes.background
将始终为truthy，这意味着类“background”（而不是
classes.background
）中生成的类名）将被包括在内，因为尚未定义“background”类，因此不会产生任何影响

相反，您应该：

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

它将无条件地包括
类。抽屉纸

这里是一个抽屉演示的修改版本，但是抽屉的背景颜色变为蓝色：
嘿，Ryan，所有这些都是有意义的，因为不需要将
background:classes.background，
替换为
[classes.drawerPaper]，
当我发送错误消息说逗号是意外标记时。@Sean我已经修复了语法