如何在 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屬性應用與列表示例相同的行為。

我將修復應用於您的示例

我希望它有所幫助。