MUI5深色模式下Drawer半透明：如何修改抽屉不透明度

自MUI5版本起，深色模式下的Drawer组件呈现半透明状态，想要修改Drawer本身（而非背景遮罩）的不透明度，但设置opacity: 1并未生效，尝试的代码如下：

<SwipeableDrawer
  open={props.drawerOpened}
  onClose={props.toggleDrawer(false)}
  onOpen={props.toggleDrawer(true)}
  PaperProps={{
    sx: {
      opacity: 1,
    }
  }}
>

问题原因 #

MUI5深色模式下Drawer的半透明并非由opacity样式控制，而是Paper组件的backgroundColor属性自带透明度值导致的，所以直接设置opacity不会生效。

解决方案 #

方案1：直接覆盖背景色

通过PaperProps的sx属性，指定完全不透明的深色背景色，可以使用MUI主题内置的不透明深色值，也可以自定义十六进制颜色：

<SwipeableDrawer
  open={props.drawerOpened}
  onClose={() => props.toggleDrawer(false)}
  onOpen={() => props.toggleDrawer(true)}
  PaperProps={{
    sx: {
      // 使用主题中的不透明深色背景
      backgroundColor: 'background.paper',
      // 或者自定义颜色：backgroundColor: '#121212'
    }
  }}
>
  {/* Drawer内容 */}
</SwipeableDrawer>

方案2：全局主题自定义

如果需要统一修改所有Drawer的深色模式表现，可以在自定义主题中覆盖Paper的样式：

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

const theme = createTheme({
  palette: {
    mode: 'dark',
  },
  components: {
    MuiDrawer: {
      styleOverrides: {
        paper: {
          backgroundColor: 'background.paper',
        },
      },
    },
  },
});

<ThemeProvider theme={theme}>
  {/* 应用组件 */}
</ThemeProvider>

额外提示 #

原代码中onClose和onOpen的写法存在问题：直接调用props.toggleDrawer(false)会导致组件渲染时就执行该方法，引发状态异常，需要改为传入函数() => props.toggleDrawer(false)和() => props.toggleDrawer(true)。

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