MUI Drawer组件设置backgroundColor不生效问题求助

问题原因 #

• Drawer组件的classes属性语法错误，你传入了两个独立对象，正确格式应为单个对象包含所有需要覆盖的内置类名
• 代码中绑定了未定义的drawerRoot样式类，属于无效代码，会干扰属性正常解析
• 若使用MUI v5版本，makeStyles作为兼容旧版本的API，样式优先级可能低于组件默认样式，导致自定义样式不生效

修复方案 #

方案1：修正现有代码语法 #

调整classes属性的写法，删除无效的drawerRoot绑定即可正常生效，若仍存在优先级问题可以在样式值后加!important手动提升优先级：

import { makeStyles } from '@mui/styles'
import { Drawer, Typography } from '@mui/material';

const drawerWidth = 240;
const useStyles = makeStyles({
  drawer: {
    width: drawerWidth,    
  },
  drawerPaper: {
    width: drawerWidth,
    backgroundColor: "#fcba03"
    // 样式不生效时打开下面的注释
    // backgroundColor: "#fcba03 !important"
  },
});

export default function Sidebar() {
  const classes = useStyles()
  return (   
    <>
      <Drawer
        variant="permanent"
        anchor="left"
        classes={{
          paper: classes.drawerPaper,
          root: classes.drawer
        }}               
      >
        <div>
          <Typography variant='h5'> Home </Typography>
        </div>
      </Drawer>
    </>
  )
}

方案2：使用MUI v5推荐的styled API（更稳定） #

MUI v5更推荐使用styled API自定义组件样式，原生支持高优先级，无需额外处理类名冲突问题：

import { styled } from '@mui/material/styles';
import { Drawer, Typography } from '@mui/material';

const drawerWidth = 240;

const CustomDrawer = styled(Drawer)(() => ({
  width: drawerWidth,
  '& .MuiDrawer-paper': {
    width: drawerWidth,
    backgroundColor: "#fcba03"
  }
}));

export default function Sidebar() {
  return (   
    <>
      <CustomDrawer
        variant="permanent"
        anchor="left"
      >
        <div>
          <Typography variant='h5'> Home </Typography>
        </div>
      </CustomDrawer>
    </>
  )
}

内容的提问来源于stack exchange，提问作者Kamil Zawiślak