更改纸张颜色 Material-UI
Change paper color Material-UI
我正在使用 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 库的某些信息,或者是纸质标签的特例?提前致谢,如果我应该提供比这更多的信息,请告诉我。
你的问题中显示的代码有几个问题。
对于您的样式,您需要更多类似于以下内容的内容:
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 库开发一个 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 库的某些信息,或者是纸质标签的特例?提前致谢,如果我应该提供比这更多的信息,请告诉我。
你的问题中显示的代码有几个问题。
对于您的样式,您需要更多类似于以下内容的内容:
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