Material UI@next Drawer组件背景色及嵌套元素样式适配修改方法

在Material UI v5（也就是你使用的material-ui@next）中，完全可以修改Drawer的背景色，并且让嵌套的List、ListItem等组件自动适配新背景的文字颜色、悬停动画等样式。这里有两种最实用的实现方式，推荐优先用第一种：

方法一：通过自定义主题全局适配（推荐） #

Material UI的所有组件样式都是基于主题系统设计的，所以修改主题中Drawer相关的颜色配置，嵌套的List、ListItem会自动继承主题的颜色变量，无需单独修改每个子组件，样式统一且维护方便。

具体步骤如下：

• 首先创建自定义主题，指定Drawer的背景色，同时调整文字、交互状态的颜色，确保在新背景上的可读性和视觉效果：

import { createTheme, ThemeProvider } from '@mui/material/styles';
import Drawer from '@mui/material/Drawer';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';

// 创建自定义主题
const customTheme = createTheme({
  palette: {
    drawer: {
      background: '#2d3748', // 替换成你想要的抽屉背景色
    },
    text: {
      primary: '#f7fafc', // 适配深色背景的浅色主文字
      secondary: '#cbd5e0', // 次要文字颜色
    },
    action: {
      hover: '#4a5568', // 悬停状态的背景色，适配抽屉背景
      selected: '#3182ce', // 选中状态的背景色
    },
  },
  // 覆盖Drawer组件的默认样式，关联主题颜色
  components: {
    MuiDrawer: {
      styleOverrides: {
        paper: {
          backgroundColor: (theme) => theme.palette.drawer.background,
        },
      },
    },
  },
});

// 在组件中用ThemeProvider包裹，让所有子组件使用自定义主题
function CustomDrawer() {
  return (
    <ThemeProvider theme={customTheme}>
      <Drawer open={true}>
        <List>
          <ListItem button>首页</ListItem>
          <ListItem button>我的收藏</ListItem>
          <ListItem button selected>设置</ListItem>
        </List>
      </Drawer>
    </ThemeProvider>
  );
}

这样设置后，List、ListItem的文字颜色、悬停/选中动画都会自动适配你定义的Drawer背景色，完全不需要手动修改每个子组件的样式。

方法二：局部自定义样式（适合单个Drawer） #

如果你不想修改全局主题，只想给某个特定的Drawer单独设置样式，可以用sx prop或者styled组件来局部覆盖样式：

使用sx prop快速实现： #

import Drawer from '@mui/material/Drawer';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';

function SingleCustomDrawer() {
  // 定义你需要的颜色值
  const drawerBg = '#1a202c';
  const textColor = '#e2e8f0';
  const hoverBg = '#2d3748';

  return (
    <Drawer
      open={true}
      sx={{
        // 覆盖Drawer的paper容器背景色
        '& .MuiDrawer-paper': {
          backgroundColor: drawerBg,
          // 嵌套选择器覆盖List和ListItem的样式
          '& .MuiListItem-root': {
            color: textColor,
            '&:hover': {
              backgroundColor: hoverBg,
              transition: 'background-color 0.2s ease', // 保持平滑的悬停动画
            },
            '&.Mui-selected': {
              backgroundColor: '#3182ce',
              color: '#fff',
            },
          },
          // 确保ListItem的文字颜色也适配
          '& .MuiListItemText-primary': {
            color: textColor,
          },
        },
      }}
    >
      <List>
        <ListItem button>首页</ListItem>
        <ListItem button>我的收藏</ListItem>
      </List>
    </Drawer>
  );
}

这种方式直接在Drawer的sx属性中通过CSS选择器嵌套，一次性覆盖所有子组件的样式，同样能达到适配效果。

小提示 #

• 如果你使用的是Material UI v5+，主题系统已经非常成熟，优先选择主题方式，这样整个应用的样式风格会更统一。
• 可以使用useTheme hook来获取主题中的颜色值，避免硬编码，比如const theme = useTheme();然后调用theme.palette.drawer.background。

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