javascript 更改纸张颜色材质-UI

oxcyiej7 于 2023-02-21 发布在 Java

关注(0)|答案(2)|浏览(116)

我正在使用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上运行这个程序时，paper仍然是一个普通的白色。我是否遗漏了一些关于classNames库的信息，或者是paper标签的一个特例？提前感谢，如果我应该提供更多的信息，请告诉我。

JavaScript

来源：https://stackoverflow.com/questions/55553207/change-paper-color-material-ui

2条答案

按热度按时间

dtcbnfnu1#

您的问题中显示的代码存在一些问题。
对于您的样式，您需要更多类似于以下内容的内容：

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将始终为truthy，这意味着类“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

赞(0）回复(0）举报 2023-02-21

r1wp621o2#

如果您使用全局theme = createTheme(，背景纸的颜色可以设置如下

const theme = createTheme({
   palette: {
   {
      primary: colors.blue,
      background: {
         default: colors.grey[50],
         paper: colors.common.white,
      },
      // ...

赞(0）回复(0）举报 2023-02-21

我来回答

javascript 更改纸张颜色材质-UI

2条答案

相关问题

热门标签

最新问答