如何在 MUI 中设置抽屉的纸张样式？

【问题标题】：How to style the paper of a Drawer in MUI?如何在 MUI 中设置抽屉的纸张样式？
【发布时间】：2021-11-28 08:33:23
【问题描述】：

Material-UI 更新 MUI 5 建议停止使用 makeStyles 定义样式。推荐使用emotion css。我想知道如何设置drawer 组件的纸张元素的样式。我的目标是将自定义宽度移交给纸张元素。如何定义合适的 css 类？

旧方式与makeStyles：

<Drawer
  classes={{
    paper: classes.paper,
  }}
  variant="persistent"
  anchor={anchor}
  open={isOpen}
>

【问题讨论】：

【解决方案1】：

使用sx 属性怎么样：

<Drawer
  PaperProps={{
    sx: {
      width: 100
    }
  }}

如果您想在没有XxProps 的情况下设置嵌套组件的样式：

<Drawer
  sx={{
    "& .MuiPaper-root": {
      width: 100
    }
  }}

如果你不想硬编码类名字符串：

import { paperClasses } from "@mui/material/Paper";

<Drawer
  sx={{
    [`& .${paperClasses.root}`]: {
      width: 100
    }
  }

编辑：如果您还希望抽屉的宽度为responsive：

<Drawer
  PaperProps={{
    sx: {
      width: {
        xs: 300,
        sm: 500
      }
    }
  }}

【讨论】：