MUI v5如何修改Drawer背景色并应用createTheme定义的自定义颜色

修改Drawer背景色的可行方案（均兼容v5特性，无废弃API） #

MUI v5的Drawer组件实际内容是由内部的Paper组件渲染的，所以修改背景色需要针对Paper子组件配置，以下是3种常用实现方式：

1. 单组件临时修改：使用sx属性（最简便） #

sx是MUI v5官方首推的行内样式方案，直接在Drawer组件上配置即可，修改你的现有代码如下：

<Drawer 
  variant="permanent" 
  anchor="left"
  sx={{
    '& .MuiDrawer-paper': {
      backgroundColor: '#000', // 这里直接设置黑色
      color: '#fff' // 可选，同步修改文字颜色避免看不清
    }
  }}
>
  {/* 原有内容不变 */}
</Drawer>

2. 可复用组件修改：使用styled封装 #

如果多个地方要用同一样式的Drawer，可以用v5的styled方法封装自定义组件：

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

const BlackDrawer = styled(Drawer)(({ theme }) => ({
  '& .MuiDrawer-paper': {
    backgroundColor: '#000',
    color: '#fff'
  }
}));

// 组件内直接用<BlackDrawer>替代原有的<Drawer>即可

3. 全局统一修改：在自定义主题中配置 #

如果需要全局所有Drawer都生效，直接在createTheme的配置中覆盖组件默认样式即可。 #

createTheme自定义颜色使用方法 #

第一步：定义自定义主题 #

首先在项目的主题配置文件（比如theme.js）中定义自定义色值：

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    // 你可以自定义任意色值分组
    custom: {
      sidebarBg: '#000',
      sidebarText: '#fff',
      primaryAccent: '#1976d2'
    }
  },
  // 也可以在这里全局配置Drawer样式，直接使用自定义色
  components: {
    MuiDrawer: {
      styleOverrides: {
        paper: ({ theme }) => ({
          backgroundColor: theme.palette.custom.sidebarBg,
          color: theme.palette.custom.sidebarText
        })
      }
    }
  }
});

export default theme;

第二步：注入主题到项目根组件 #

确保你的项目根组件用ThemeProvider包裹，所有子组件才能读取到自定义主题：

import { ThemeProvider } from '@mui/material/styles';
import theme from './theme';
import Sidebar from './Sidebar';

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Sidebar />
      {/* 其他项目组件 */}
    </ThemeProvider>
  );
}

第三步：在组件中使用自定义颜色 #

• 在sx属性中使用时，直接填写主题中定义的路径即可：

  <Drawer 
    sx={{ '& .MuiDrawer-paper': { bgcolor: 'custom.sidebarBg' } }}
    variant="permanent" 
    anchor="left"
  >
  

• 在styled组件、组件回调中使用时，从入参的theme对象中读取即可：

  const SomeBox = styled('div')(({ theme }) => ({
    backgroundColor: theme.palette.custom.sidebarBg
  }));
  

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