如何在MUI 5中为Drawer组件的paper元素自定义样式？

以下是3种符合MUI 5推荐规范的实现方式，你可以根据业务场景选择：

方案1：使用sx属性直接配置（最简便，无需额外定义） #

MUI 5 所有组件原生支持sx属性，可以直接针对组件内置插槽写样式，不用单独定义类：

<Drawer
  variant="persistent"
  anchor={anchor}
  open={isOpen}
  sx={{
    '& .MuiDrawer-paper': {
      width: 240, // 支持数值、百分比、rem等任意合法CSS单位
    }
  }}
>
  {/* Drawer 内部内容 */}
</Drawer>

方案2：使用styled封装自定义组件（复用性最高） #

如果该样式需要在多个Drawer上复用，可以用emotion的styled方法封装独立组件：

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

// 定义固定paper宽度的自定义Drawer
const CustomDrawer = styled(Drawer)(({ theme }) => ({
  '& .MuiDrawer-paper': {
    width: 240,
    // 可扩展添加其他paper相关样式，比如背景色、内边距等
  }
}));

// 业务代码中直接使用
<CustomDrawer
  variant="persistent"
  anchor={anchor}
  open={isOpen}
>
  {/* Drawer 内部内容 */}
</CustomDrawer>

方案3：使用emotion css方法定义独立类（适配旧写法习惯，改造成本最低） #

如果你习惯之前makeStyles单独定义类、再通过classes传入的写法，可以用这种方式，和旧用法逻辑完全一致：

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

// 定义paper的自定义样式类
const customPaperClass = css`
  width: 240px;
`;

// 直接传入classes的paper字段即可，和之前makeStyles的用法完全一致
<Drawer
  classes={{
    paper: customPaperClass,
  }}
  variant="persistent"
  anchor={anchor}
  open={isOpen}
>
  {/* Drawer 内部内容 */}
</Drawer>

注意：如果你的项目已经全局配置了emotion的jsx运行时，顶部的/** @jsxImportSource @emotion/react */注释可以省略。

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