【问题标题】: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>
        

        【讨论】:

          猜你喜欢
          • 2018-10-10
          • 2018-09-28
          • 2016-10-09
          • 2022-11-02
          • 1970-01-01
          • 2020-07-07
          • 1970-01-01
          • 2022-01-02
          • 2017-08-20
          相关资源
          最近更新 更多