使材质 UI 抽屉保持相同的大小，而不是在内容大小更改时调整大小

Question

我正在使用带有抽屉的 Material UI。

在抽屉里，是一组可折叠的列表。当我展开列表时，列表文本项可能很长，而抽屉跳出的范围更广。我希望抽屉的宽度是窗口大小的 30%，但是当我尝试在抽屉上设置类时，root 和模态 classNames 似乎都没有固定抽屉宽度。

这是抽屉代码：

<Drawer classes={drawerClasses} open={showStandardDrawer} anchor={"right"} onClose={closeDrawer}>

 {Array.from(items).map((item, index) => {
      return (
      <List
          key={`list-${index}`}
          component="div"
          aria-labelledby="nested-list-subheader"
          subheader={
             <ListSubheader component="div" id="nested-list-subheader">
                 {item.title}
             </ListSubheader>
          }
          className={classes.root}
      >
         { item.elements.map((el, index) => {
             return (
              <React.Fragment key={index}>
                  <ListItem key={index} button onClick={() => handleExpand(index)}>
                     <ListItemText primary={el.name} />
                          {open[index] ? <ExpandLess /> : <ExpandMore />}
                  </ListItem>
                  <Collapse in={open[index]} timeout="auto" unmountOnExit>
                      { el.descriptions.map((description, index) => {
                           return (
                               <List key={`l-${index}`} component="div" disablePadding>
                                 <ListItem button className={classes.nested} >
                                     <ListItemIcon>
                                        <StarBorder />
                                     </ListItemIcon>
                                     <ListItemText primary={description} primaryTypographyProps={{noWrap:true, width:'200px'} } />
                                   </ListItem>
                                </List>
                          )})
                    }
                    </Collapse>
               </React.Fragment>
            )
       })}
     </List>
    )
    })}
</Drawer>

这些是应用于抽屉的类（'drawerClasses'）：

{
    root: {
        maxWidth: '200px',
        minWidth: '50%',
        width: '50%',
        overflow: 'hidden'
    },
    modal: {
        maxWidth: '50%',
        minWidth: '50%',
        width: '50%'
    }
}

这些不是我一定想要的样式，我只是想看看是否可以让 Drawer 自行调整大小，而不是围绕其子项调整大小。

Answer 1

而不是modal，使用paper类。在Paper抽屉内元件是主要可见容器。的root和modal类被施加到被定位在这样的方式它们的宽度也不一定会影响纸张宽度包装元素。

这是永久抽屉演示的代码摘录：

const useStyles = makeStyles(theme => ({
  drawer: {
    width: drawerWidth,
    flexShrink: 0,
  },
  drawerPaper: {
    width: drawerWidth,
  },
}));

...

      <Drawer
        className={classes.drawer}
        variant="permanent"
        classes={{
          paper: classes.drawerPaper,
        }}
        anchor="left"
      >

https://codesandbox.io/s/zxljh