reactjs - 如何将 react-perfect-scrollbar 与 react-select 集成

我想将样式应用于滚动条，滚动条样式在使用 css 的 chrome 中完美运行。但在 Firefox 和 Iexplore 中不起作用。

因此我选择了完美滚动条，但是如果我们使用箭头键导航选项，滚动条不会按预期移动，滚动位置不会改变。

下面是演示链接:

https://codesandbox.io/s/18pvjy0olj

提前致谢!

最佳答案

基本上你需要使用 MenuList 组件并用完美的滚动条包裹 child :

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