更改纸张颜色 Material-UI

Posted 2023-03-16

【中文标题】更改纸张颜色 Material-UI

【英文标题】：Change paper color Material-UI

【发布时间】：2019-08-28 09:49:24

【问题描述】：

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

【参考方案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 将始终是真实的，这意味着将包含类“背景”（而不是 classes.background 中生成的类名），这将没有任何效果，因为“背景”类没有已定义。

相反，您应该：

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

将无条件包含classes.drawerPaper。

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

【讨论】：

嘿瑞恩，所有这一切都与排除 background: classes.background, 替换 [classes.drawerPaper], 是有道理的，因为我收到错误消息说逗号是一个意外的标记。

@Sean 我已经修正了语法