如何设置 Material UI 抽屉的宽度

Question

我试图通过将其锚定到 来使用 Material UI 抽屉，它可以top正常工作，但唯一的问题是我无法更改抽屉的宽度，它占用了页面的整个宽度。我尝试更新 css 中的宽度，例如

 list: {
    width: 250.   //tried to update it to 100, but its not taking
  },

代码沙盒 如何更新宽度？

Answer 1

对于 MUI 版本 5，您必须PaperProps像这样使用该 prop：

<Drawer
  PaperProps={{
    sx: { width: "90%" },
  }}
>
  /* ...child elements */
</Drawer>

Answer 2

这是Drawer paper你必须改变的。

const useStyles = makeStyles({
  paper: {
    width: 250
  }
});

<Drawer
  anchor={anchor}
  open={state[anchor]}
  onClose={toggleDrawer(anchor, false)}
  classes={{ paper: classes.paper }}
>