Question

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

在抽屉内是一组可折叠列表。当我展开列表时，列表文本项可能会很长，并且抽屉会跳得更宽。我希望抽屉的宽度是窗口大小的30％，但是当我尝试在抽屉上设置类时，root和modal 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类适用于包装元素，其位置方式使其宽度不一定会影响Paper的宽度。

这是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

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

1 个答案: