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

编辑：（1月19日）-材质用户界面V3.8.3
至于所要求的最新版本，配置backgroundColor的方法是覆盖这些类。
基于material-ui文档here和抽屉here的css api-这可以通过创建以下形式的对象来实现：

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

并将其传递给Drawer组件：

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

可以在this代码和框中看到一个有效的示例。
别忘了用提到的here

用material-ui的withStyles HoC包装您的组件

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

对于低于V1的版本，您可以像这样更改containerStyle道具：

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

Answer 2

材料界面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;

Answer 3

抽屉不接受样式道具。改用 classes

请参见Drawer API

Answer 4

如果有人正在寻找如何在暗/亮模式下有条件地执行此操作，您可以创建 2 个单独的类并使用条件在组件中使用正确的类。以下是如何修改 @Yirenkyi's answer 来实现此目的的示例：

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

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

const SideDrawer = props => {
  
  const userPrefersDarkMode = true; //here's your condition

  const styles = useStyles();

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

export default SideDrawer;

Material-UI Drawer设置背景色

4 个答案: