Material UI Drawer打开时如何设置背景色并修改透明度（React+TS）

官方文档未找到直接配置入口的原因：Drawer的背景视觉效果由内部嵌套的Paper组件承载，未在Drawer的公开Props中开放独立的背景配置项，需要通过样式覆盖的方式实现自定义需求。

具体实现方式按使用场景分为三类：

1. 单组件快速配置（sx 属性） #

适合仅对单个特殊Drawer做自定义样式的场景，和TS类型完全兼容，不需要额外编写独立样式文件：

import { useState } from 'react';
import Drawer from '@mui/material/Drawer';
import { alpha } from '@mui/material/styles';
import { blue } from '@mui/material/colors';

export function OpenedDrawer() {
  const [isOpen, setIsOpen] = useState(true);

  return (
    <Drawer
      open={isOpen}
      sx={{
        // 定向覆盖内部Paper节点的样式
        '& .MuiDrawer-paper': {
          // 自定义背景 + 透明度示例：用MUI alpha函数计算半透明蓝色
          backgroundColor: alpha(blue[500], 0.85),
          // 可选：搭配毛玻璃效果优化半透明观感
          backdropFilter: 'blur(8px)',
        },
        // 可选：调整遮罩层透明度
        '& .MuiBackdrop-root': {
          backgroundColor: 'rgba(0, 0, 0, 0.3)'
        }
      }}
    >
      {/* 抽屉内容区域 */}
    </Drawer>
  )
}

2. 可复用组件配置（styled 高阶组件） #

适合需要在多个页面复用同一样式Drawer的场景，可保留完整的TS类型推导：

import { styled } from '@mui/material/styles';
import Drawer, { DrawerProps } from '@mui/material/Drawer';
import { alpha } from '@mui/material/styles';
import { purple } from '@mui/material/colors';

// 自定义Drawer组件，完整继承原生Drawer的所有Props类型
const CustomTransparentDrawer = styled(Drawer)<DrawerProps>(() => ({
  '& .MuiDrawer-paper': {
    backgroundColor: alpha(purple[400], 0.9),
    borderRight: 'none'
  }
}));

3. 全局统一配置（ThemeProvider 主题定制） #

适合要求全应用所有Drawer统一应用自定义背景样式的场景：

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

const appTheme = createTheme({
  components: {
    MuiDrawer: {
      styleOverrides: {
        paper: {
          backgroundColor: alpha(grey[100], 0.92),
        }
      }
    }
  }
});

// 在应用根节点包裹主题提供者
// <ThemeProvider theme={appTheme}>
//   <App />
// </ThemeProvider>

常见踩坑说明 #

• 不要直接给Drawer根节点写backgroundColor属性：Drawer根组件仅负责定位和动画逻辑，实际渲染带背景、阴影的面板是内部嵌套的Paper组件，直接给根节点写样式不会生效
• 透明度实现可灵活选择三种方式：
  • 直接书写标准rgba()格式色值
  • 在十六进制色值后追加两位十六进制透明度值（例如#ffffffD9对应90%不透明度）
  • 使用MUI内置的alpha()工具函数，传入基础色值和0-1区间的透明度参数，无需手动计算色值，对TS类型支持最完善
• 若半透明背景下观感突兀，可同步调整同层级的Backdrop遮罩层样式，匹配整体透明度效果

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