Material-UI Drawer设置背景色

Question

如何简单地设置Material-UI Drawer的背景颜色？尝试了这个，但没有用

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

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

Answer 1

在Material UI v5中，您可以使用sxprop 来设置 Material UI 组件的样式：

<Drawer
  PaperProps={{
    sx: {
      backgroundColor: "pink",
      color: "red",
    }
  }}

或者使用styleOverrides以下方式定义自定义样式createTheme：

const theme = createTheme({
  components: {
    MuiDrawer: {
      styleOverrides: {
        paper: {
          backgroundColor: "pink",
          color: "red",
        }
      }
    }
  }
});

Answer 2

编辑：（1月19日）-材质UI V3.8.3
至于要求的最新版本，配置的backgroundColor方法是通过覆盖类。
基于材料的UI文件在这里，和抽屉的CSS API 这里 -这可以通过在形式的对象来完成：

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

并将其传递给Drawer组件：

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

可以在此代码和框中看到一个有效的示例。
别忘了用此处withStyles提到的material-ui的HoC 包装您的组件

根据您使用的道具，我有理由认为您使用的版本低于v1.3.1（最后一个稳定版本），但是对于接下来要问的问题，我建议编写您使用的版本。

对于低于的版本V1，您可以这样更改containerStyleprop：

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

Answer 3

Material UI V4.3.2 在这个版本中，你可以通过使用'@material-ui/core/styles'中的makeStyles来改变backgroundColor，如下所示：

import Drawer from '@material-ui/core/Drawer';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  paper: {
    background: 'black',
    color: 'white'
  }
});

const SideDrawer = props => {
  const styles = useStyles();

  return (
    <Drawer
      anchor="right"
      open={props.drawerOpen}
      onClose={() => props.toggleDrawer(false)}
      classes={{ paper: styles.paper }}
    >
      Items
    </Drawer>
  );
};

export default SideDrawer;