5

我正在使用 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 库的某些内容,或者是纸质标签的特例?提前致谢,如果我应该提供比这更多的信息,请告诉我。

4

1 回答 1

5

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

对于您的样式,您需要更多类似以下的内容:

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

在这种情况下,“drawerPaper”是我的类名的键,然后右侧的对象包含该类的 CSS 属性。当传入 时withStyles,这将生成如下 CSS:

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

您有一个“背景”的类名键,其中字符串“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,对象的键是类名和关联的值控制(基于它是 false 还是 true)是否应包含类名。使用您使用的语法,classes.background将始终是真实的,这意味着将包含类“背景”(而不是生成的类名classes.background),因为尚未定义“背景”类,所以这将不起作用。

相反,您应该拥有:

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

这将无条件包括classes.drawerPaper.

这是抽屉演示之一的修改版本,但抽屉的背景颜色更改为蓝色:https ://codesandbox.io/s/wqlwyk7p4l

于 2019-04-06T21:40:35.843 回答