Question

我正在使用material-ui库开发一个React项目。我目前正在尝试添加一个对我来说效果很好的抽屉。但是，我正在尝试更改此抽屉的背景颜色。我听说这样做的方法是通过改变抽屉纸的颜色。我尝试将以下标签添加到我的CSS对象中：

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

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

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

但是，当我在localhost上运行此文件时，它仍然是普通的旧白色。我是否缺少有关classNames库的内容，还是纸标签的特殊情况？在此先感谢您，让我知道是否应该提供更多信息。

Answer 1

问题中显示的代码中有几个问题。

对于您的样式，您需要更多类似以下内容的东西：

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

在这种情况下，“ drawerPaper”是我的类名称的键，然后右边的对象包含该类的CSS属性。当传递到withStyles时，将生成如下CSS：

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

您有一个类名键“ background”，其字符串为“ BLUE”作为CSS属性，最终将以CSS如下所示：

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

这当然不是有效的CSS，并且对本文没有影响。

第二个问题是如何指定类：

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

将对象传递给classNames时，该对象的键是类名以及是否应包含类名的关联值控件（基于是假还是真）。使用您使用的语法，classes.background将始终是真实的，这意味着将包括类“ background”（而不是classes.background中生成的类名），因为“ background”类尚未定义。

相反，您应该具有：

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

其中将无条件包含classes.drawerPaper。

这里是Drawer演示之一的修改版，但抽屉的背景色更改为蓝色：https://codesandbox.io/s/wqlwyk7p4l

更改纸张颜色Material-UI

1 个答案: