React/material-ui ListItem 列表粘性但重叠

Question

我想要一个带有粘性子标题的 material-ui 列表项。我设法得到了这个粘性，但是滚动时子标题与项目重叠：

如何防止这种情况？完整代码：

    <List
      {...rest}
      className={clsx(classes.root, className)}
      subheader={<li />}
    >
      {pages.map(group => (
        <li>
          <ul className={classes.ul}>
            {group.groupname && <><Divider /><ListSubheader>{group.groupname}</ListSubheader></> }
            {group.routes.map(page => (
              <div key={page.title}>
                {page.children ? 
                  <>
                    <ListItem
                      className={classes.item}
                      disableGutters
                      key={page.title}
                    >                
                      {page.title}
                    </ListItem>
                    <Collapse in={state[page.title] ? true : false} timeout="auto" unmountOnExit>
                      <List component="div" disablePadding>
                        {page.children.map(childpage => (
                          <ListItem
                            className={classes.nested}
                            disableGutters
                            key={childpage.title}
                          >                
                            {childpage.title}
                          </ListItem>
                        ))}

                      </List>
                    </Collapse>
                  </>
                  : 
                  <ListItem
                    className={classes.item}
                    disableGutters
                    key={page.title}
                  >
                    {page.title}
                  </ListItem>
                }
              </div>
            ))}
          </ul>
        </li>
      ))}
    </List>

我从 material-ui 网站扩展了示例

Answer 1

目前有完全相同的问题，除了列表完全扩展时无法滚动到导航栏的底部：

我想出了一个临时解决方案，但我无法使子标题项的粘性功能发挥作用，而不会在滚动时与菜单内容重叠。

对于重叠问题，请disableSticky={true}在每个 ListSubheader 元素上进行设置。这应该可以解决您的具体问题。

我的滚动问题是由top: 60我在中设置的引起的createMuiTheme。为了解决这个问题，我只需将顶部替换为填充：

/** Navigation Drawer **/
MuiDrawer: {
  paper: {
    paddingTop: 60,
    width: 256,
    minWidth: 150,
  }
}