在 MUI v5 中更改抽屉的颜色答案

【问题标题】：Changing color of Drawer in MUI v5在 MUI v5 中更改抽屉的颜色
【发布时间】：2021-11-29 16:07:01
【问题描述】：

我在我的项目中使用 MUI v5 并尝试将样式应用于Drawer，以便背景颜色为黑色。由于此更新是最近的更新，因此如果不使用 MUI v4 中已弃用的元素，我无法找到有关更改组件样式的更多信息。对此有什么建议吗？对于应用我使用来自 MUI 的 createTheme 定义的颜色，我也将不胜感激。

import React from "react";
import {
  Divider,
  Drawer,
  ListItem,
  ListItemButton,
  ListItemIcon,
  ListItemText,
} from "@mui/material";
import AddIcon from "@mui/icons-material/Add";
import SearchIcon from "@mui/icons-material/Search";
import HomeIcon from "@mui/icons-material/Home";
import qdjLogo from "../../assets/qdj_logo.png";
import "./styling/SideBarStyling.css";
import ProfileFooter from "./ProfileFooter";

function Sidebar() {
  return (
    <div>
      <Drawer variant="permanent" anchor="left">
        <div className={"wrapper"}>
          <a href="">
            <img className={"icon"} src={qdjLogo} alt="QDJ Logo" />
          </a>
        </div>
        <ProfileFooter />
      </Drawer>
    </div>
  );
}

export default Sidebar;

【问题讨论】：

标签： css reactjs material-ui material-design

【解决方案1】：

您可以像这样简单地覆盖主题：

const theme = createTheme({
  components: {
    MuiDrawer: {
      styleOverrides: {
        paper: {
          background: "orange"
        }
      }
    }
  }
});

这是sandbox

【讨论】：

【解决方案2】：

您可以通过使用 sx 属性在其中设置 Paper 组件的样式来更改 Drawer 的背景颜色：

<Drawer
  PaperProps={{
    sx: {
      backgroundColor: "pink"
    }
  }}
  {...}
/>

如果您想将background-color 设置为黑色，也许您想要一个深色主题？您可以通过像这样设置dark mode 来配置MUI 主题以自动为Paper 设置深色背景：

const theme = createTheme({
  palette: {
    mode: "dark"
  }
});

<ThemeProvider theme={theme}>
  <Content />
</ThemeProvider>

参考

https://mui.com/guides/migration-v4/#migrate-from-jss

【讨论】：