css - 使 Material UI 抽屉保持相同大小，而不是在内容大小更改时调整大小

Question

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

在抽屉里，是一组可折叠列表。当我展开列表时，列表文本项可能会很长，并且抽屉会跳出更宽的范围。我希望抽屉的宽度是窗口大小的 30%，但是当我尝试在抽屉上设置类时，root 和模态类名似乎都无法保持抽屉宽度。

这是抽屉代码:

<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 类应用于包装元素，这些元素的放置方式使其宽度不一定会影响纸张宽度。

这是来自 Permanent drawer demo 的代码摘录:

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