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

Question

Material-UI 更新MUI 5建议停止使用makeStyles来定义样式。推荐使用情感CSS。我想知道如何设计抽屉组件的纸张元素的样式。我的目标是将自定义宽度移交给纸张元素。如何定义正确的 css 类？

抽屉沙盒

老方法makeStyles：

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

Answer 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
    }
  }

编辑：如果您还希望抽屉的宽度具有响应能力：

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