javascript - MUI抽屉设置背景颜色

Question

如何简单设置MUI Drawer的背景颜色？试过这个，但不起作用

<Drawer 
  style={listStyle3}
  open={this.state.menuOpened}
  docked={false}
  onRequestChange={(menuOpened) => this.setState({menuOpened})}
/>

const listStyle3 = {
  background: '#fafa00',
  backgroundColor: 'red'
}

Answer 1

编辑:(5 月 21 日)- Material UI V4.11.1
这可以在 4.11.1 版本和功能组件中以不同方式完成。
不再需要使用 HoC。这是它的完成方式:
你应该使用 makeStyles 帮助程序使用类的定义创建钩子(Hook)并使用钩子(Hook)将它们拉出来。

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 日)- Material UI V3.8.3
至于最新版本问，配置方式backgroundColor将通过覆盖类。
基于 material-ui 文档 here ，以及抽屉的 css api here - 这可以通过创建以下形式的对象来完成:

const styles = {
  paper: {
    background: "blue"
  }
}

并将其传递给 Drawer 组件:

 <Drawer
      classes={{ paper: classes.paper }}
      open={this.state.left}
      onClose={this.toggleDrawer("left", false)}
    >

可以在 this 中看到一个工作示例codesandbox.
不要忘记用 material-ui 的 withStyles 包裹你的组件提到的 HoC here

---

根据您使用的 Prop ，我有理由认为您使用的版本低于 v1.3.1 (最后一个稳定版本)但是对于接下来你会问的问题，我建议写下你正在使用的版本。

版本低于V1 ，您可以更改 containerStyle Prop 是这样的:

<Drawer open={true} containerStyle={{backgroundColor: 'black'}}/>