梅抽屉套装背景色
如何简单设置MUI的背景色Drawer
?
已尝试此操作,但不起作用
<Drawer
style={listStyle3}
open={this.state.menuOpened}
docked={false}
onRequestChange={(menuOpened) => this.setState({menuOpened})}
/>
const listStyle3 = {
background: '#fafa00',
backgroundColor: 'red'
}
解决方案
编辑:(5-21)-Material UI V4.11.1
在版本4.11.1和功能组件中,这一点可以有所不同。
没有必要再用临时的了。它是这样做的:
您应该使用makeStyles
帮助器创建带有类定义的挂钩,并使用挂钩将它们拉出。
const useStyles = makeStyles({
list: {
width: 250
},
fullList: {
width: "auto"
},
paper: {
background: "blue"
}
});
const DrawerWrapper = () => {
const classes = useStyles();
return (
<Drawer
classes={{ paper: classes.paper }}
open={isOpen}
onClose={() => setIsOpen(false)}
>
<div
tabIndex={0}
role="button"
onClick={() => setIsOpen(true)}
classes={{ root: classes.root }}
>
{sideList}
</div>
</Drawer>
)
}
这是一个有效的sandbox
编辑:(1月19日)-物料界面V3.8.3
至于问及的最新版本,配置backgroundColor
的方式将是覆盖类。
基于材料-UI文档here和抽屉的CSSAPIhere-这可以通过创建以下形式的对象来完成:
const styles = {
paper: {
background: "blue"
}
}
并将其传递给抽屉组件:
<Drawer
classes={{ paper: classes.paper }}
open={this.state.left}
onClose={this.toggleDrawer("left", false)}
>
this代码框中提供了一个工作示例。不要忘记用上述herehereui的
withStyles
特殊材料包装您的组件
根据您使用的道具,我有理由认为您使用的版本低于v1.3.1
(上一个稳定版本),但对于您将提出的下一个问题,我建议您编写您正在使用的版本。
对于V1
以下的版本,可以这样修改containerStyle
道具:
<Drawer open={true} containerStyle={{backgroundColor: 'black'}}/>
相关文章