MUI 抽屉设置背景颜色

Question

如何简单设置MUIDrawer的背景色？ 试过了，还是不行

<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 帮助器创建带有类定义的钩子，并使用该钩子将它们拉出。

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)}
    >

可以在thiscodesandbox 中看到一个工作示例。
不要忘记用 material-ui 的 withStyles HoC 包装你的组件，正如提到的 here

---

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

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

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

Answer 2

材质 UI V4.3.2 在这个版本中，您可以通过使用来自 '@material-ui/core/styles' 的 makeStyles 来更改背景颜色，如下所示：

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

在 MUI v5 中，您可以使用 sx 属性来设置 MUI 组件的样式：

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

或者使用styleOverrides在createTheme中定义自定义样式：

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

Answer 4

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

见Drawer API

Answer 5

如果有人在寻找如何有条件地为暗/亮模式执行此操作，您可以创建 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;