如何设置材质UI抽屉的宽度

Question

我正在尝试通过将材质的UI抽屉锚定到top来使用它，可以正常使用，但是唯一的事情是我无法更改抽屉的宽度，它占据了页面的整个宽度。我试图像这样更新CSS的宽度

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

codesandbox 如何更新宽度？

Answer 1

这是您必须更改的Drawer paper。

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

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

Answer 2

在需要时也可以按如下方式编写内联样式。

const useStyles = makeStyles({
  
});

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