如何在 Material UI Select 菜单中使用 SubHeaders

Question

我正在努力解决如何在使用粘性子标题的Select 控件上正确设置一长串菜单项。 问题在于，当项目滚动时，它们会掩盖子标题。

我查看了分组 Select 项目的 Material UI 示例作为开始。 我想要看起来像带有固定 subHeader Lists的 Material UI 示例的行为。

这是我正在尝试的代码沙盒。

下面是我的代码片段：

<Select
        className={classes.root}
        MenuProps={{ className: classes.menu }}
        value="Pick one"
        onChange={e => {}}
      >
        {subHeaders.map(header => (
          <li key={header}>
            <ul>
              <ListSubheader>{header}</ListSubheader>
              {items.map(item => (
                <MenuItem key={item} value={item}>
                  {item}
                </MenuItem>
              ))}
            </ul>
          </li>
        ))}
      </Select>

这是问题的快照：

Answer 1

使用Select组件，我们甚至可以通过一些更正来重现该行为。 但它对你不起作用。 Select组件不希望项目嵌套在您孩子的元素中。 这样，我们将永远无法识别被选中的元素。

或者，我们有自动完成组件。 它可以更好地满足您的需求。

关于您提供的示例，我们可以做一些事情，但同样，我们将无法维护所选项目的 state。 为了实现与列表相同的行为，我们需要将相同的行为应用于菜单将呈现的列表。 Select 将呈现一个继承 List 的 Menu，因此我们可以通过 prop MenuListProps属性应用与列表示例相同的行为。

我将修复应用于您的示例

我希望它有所帮助。