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

Posted 2023-03-15

【中文标题】如何在 MUI 中设置抽屉的纸张样式？

【英文标题】：How to style the paper of a Drawer in MUI?

【发布时间】：2021-11-28 08:33:23

【问题描述】：

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

Drawer sandbox

旧方式与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
      
    
  

【讨论】：

哇，真快！我还可以像在 makeStyle-classes 中那样添加媒体查询吗？

@vuvu 你想要 v5 中的 this 之类的东西吗？

非常感谢，这对我很有效！