Как использовать подзаголовки в меню выбора пользовательского интерфейса материала

Question

Я изо всех сил пытаюсь настроить длинный список пунктов меню на элементе управления , который использует закрепленные подзаголовки. Проблема в том, что когда элементы прокручиваются, они закрывают подзаголовки. Мне нужно поведение, которое выглядело бы как пример Material UI с закрепленными списками подзаголовков .

Вот codeSandbox того, что я пытаюсь.

Ниже приведен фрагмент моего кода:

<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 не ожидает, что элементы вложены в дочерние элементы . Таким образом, мы никогда не сможем идентифицировать выбранный элемент .

В качестве альтернативы у нас есть Автозаполнение компонент. Он может лучше предоставить то, что вам нужно.

Что касается приведенного вами примера, мы можем что-то сделать, но, опять же, мы не будем в состоянии поддерживать состояние выбранного элемента. Чтобы добиться того же поведения, что и список, нам нужно применить такое же поведение к списку, который будет отображать Меню. Select отобразит меню, которое наследует List, поэтому мы можем применить то же поведение, что и в примере списка, с помощью свойства prop MenuListProps .

Я применил исправления к вашему примеру

Надеюсь, это поможет.