如何设置 Material UI 抽屉的宽度答案

【问题标题】：How to set the width of Material UI drawer如何设置 Material UI 抽屉的宽度
【发布时间】：2020-09-22 11:25:58
【问题描述】：

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

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

codesandbox 如何更新宽度？

【问题讨论】：

你到底想改变什么？整个抽屉的宽度来自顶部还是内部列表？

标签： javascript css reactjs material-ui

【解决方案1】：

这是您必须更改的 Drawer paper。

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

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

【讨论】：

【解决方案2】：

如果需要，内联样式也可以写成如下。

const useStyles = makeStyles({
  
});

<Drawer
  anchor={anchor}
  open={state[anchor]}
  onClose={toggleDrawer(anchor, false)}
  style={{ width : "100px"}}
>

【讨论】：

【解决方案3】：

抽屉取最里面元素的宽度。

const useStyle = makeStyles({
 list: {
    width: 150
  }
});

<Drawer>
   <Container className={classes.list} /> 
</Drawer>

【讨论】：

【解决方案4】：

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

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

【讨论】：