React/material-ui ListItem 列表粘滞但重叠答案

【问题标题】：React/material-ui ListItem list sticky but overlappingReact/material-ui ListItem 列表粘滞但重叠
【发布时间】：2021-07-29 19:20:10
【问题描述】：

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

如何预防？完整代码：

    <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网站扩展了例子

【问题讨论】：

您最终解决了这个问题吗？我遇到了完全相同的问题，除了当我的列表项完全扩展时无法滚动到底部。
我也遇到了类似的问题，但是无法解决，请问您能否在代码沙箱上分享示例工作代码？提前谢谢你

标签： reactjs material-ui

【解决方案1】：

你应该使用 disableSticky 道具。

【讨论】：

这不是解决方案

【解决方案2】：

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

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

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

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

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

【讨论】：

【解决方案3】：

问题在于 Collapse 组件的大小。尝试将道具 collapsedSize 设置为 "auto"。

<Collapse ... collapsedSize="auto">...</Collapse>

collapsedSize：折叠时容器的高度。

文档Collapse API

【讨论】：