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

Question

Material-UI 更新 MUI 5 advices to stop using makeStyles to define styles. It is recommended to use emotion css. I wonder how to style the paper element of the drawer 组件。我的目标是将自定义宽度移交给纸张元素。如何定义合适的 css-class?

Drawer sandbox

旧方法 与 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
    }
  }}

如果您不想硬编码 class 名称字符串：

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

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

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

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

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

How to style the paper of a Drawer in MUI?

emotion

reactjs

material-ui