The Material-UI update 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 component. My goal is to handover a custom width to the paper element. How can I define a proper css-class?

Drawer sandbox

Old way with makeStyles:

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

CodePudding user response：

How about using the sx prop:

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

In case you want to style a nested component without XxProps:

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

If you don't want hardcode class name string:

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

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

EDIT: If you also want the Drawer's width to be responsive:

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