如何修改Mini Variant Drawer的背景颜色？React新手求助

你的两种写法都存在问题，导致背景色没生效，下面是具体问题和解决办法：

你之前写法的问题 #

• V1：backgroundColour是拼写错误（正确是backgroundColor，美式拼写不带字母u），而且black没有加引号（字符串需要用引号包裹）。另外Material-UI组件的内部样式优先级较高，直接用style属性容易被覆盖，不推荐这么用。
• V2：backgroundColor并不是Drawer组件的合法props，组件不会识别这个属性，自然不会生效。

正确的实现方式 #

方法1：使用sx属性（MUI v5 推荐写法）

sx是Material-UI v5提供的样式方案，优先级足够且写法简洁，直接在Drawer上设置即可：

<Drawer
  variant="permanent"
  open={open}
  sx={{ backgroundColor: "black" }}
>
  {/* 抽屉内部内容 */}
</Drawer>

如果需要更精准控制内部的Paper容器，可以通过PaperProps传递样式：

<Drawer
  variant="permanent"
  open={open}
  PaperProps={{
    sx: { backgroundColor: "#000" }
  }}
>
  {/* 抽屉内部内容 */}
</Drawer>

方法2：使用自定义CSS类

如果习惯用传统CSS，可以定义一个自定义类：

.custom-drawer-bg {
  background-color: black;
}

然后通过PaperProps将类名传给Drawer的内部容器：

<Drawer
  variant="permanent"
  open={open}
  PaperProps={{ className: "custom-drawer-bg" }}
>
  {/* 抽屉内部内容 */}
</Drawer>

如果遇到样式被覆盖的情况，可以给样式加上!important（尽量少用，优先通过sx解决优先级问题）：

.custom-drawer-bg {
  background-color: black !important;
}

内容的提问来源于stack exchange，提问作者User