更改纸张颜色 Material-UI

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" 是我的 class 名称的键，然后右边的对象包含 class 的 CSS 属性。当传入 withStyles 时，这将生成 CSS，如下所示：

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

你有一个 "background" 的 class 名称键，字符串 "BLUE" 作为 CSS 属性，它将以 CSS 结束，如下所示:

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

这当然是无效的CSS并且对论文没有影响。

第二个问题是如何指定 classes:

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

当您将对象传递给 classNames 时，对象的键是 class 名称和关联的值控制（基于它是假的还是真实的）class 名称应包括在内。使用您使用的语法，classes.background 将始终为真，这意味着将包含 class "background"（而不是 classes.background 中生成的 class 名称）由于 "background" class 尚未定义，这将无效。

相反，您应该：

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

无条件包含classes.drawerPaper.

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

更改纸张颜色 Material-UI

Change paper color Material-UI

javascript

css

reactjs

material-ui

class-names