Как интегрировать реагирующую-идеальную полосу прокрутки с реагирующим выбором

Question

Я хочу применить стиль к полосе прокрутки, стиль полосы прокрутки отлично работает в Chrome, используя CSS. но не работает в Firefox и Iexplore.

Поэтому я выбрал perfect-scroll-bar, но полоса прокрутки не перемещается, как ожидалось, если мы перемещаемся по опциям с помощью клавиш со стрелками, положение прокрутки не меняется.

Ниже приведена демонстрационная ссылка:
https://codesandbox.io/s/18pvjy0olj

Заранее спасибо!

Answer 1

В основном вам нужно использовать компонент MenuList и обернуть детей идеальной полосой прокрутки:

function MenuList(props) {
  return (
    <div className={props.selectProps.classes.menuList}>
      <PerfectScrollbar>{props.children}</PerfectScrollbar>
    </div>
  );
}

Также не забудьте установить свойство высоты для родительского контейнера:

  menuList: {
    height:300
  }

И обновление компонентов объекта

const components = {
  Control,
  Menu,
  MenuList, // here
  MultiValue,
  NoOptionsMessage,
  Option,
  Placeholder,
  SingleValue,
  ValueContainer
};

Я сделал обновление на вашем примере: https://codesandbox.io/s/n5pmxp57n0