梅抽屉套装背景色 [英] MUI Drawer set background color

查看:14
本文介绍了梅抽屉套装背景色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

如何简单设置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'}}/>

这篇关于梅抽屉套装背景色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆