如何将 react-perfect-scrollbar 与 react-select 集成答案

【问题标题】：How to integrate react-perfect-scrollbar with react-select如何将 react-perfect-scrollbar 与 react-select 集成
【发布时间】：2019-06-08 10:22:29
【问题描述】：

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

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

以下是演示链接：
https://codesandbox.io/s/18pvjy0olj

提前致谢！

【问题讨论】：

标签： reactjs material-ui react-select perfect-scrollbar

【解决方案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

【讨论】：

【解决方案2】：

您需要将 Scrollbar 设置为 MenuProps 之类的...

import { InputLabel, MenuItem, FormControl as MuiFormControl, Select as MuiSelect } from "@material-ui/core";
import PerfectScrollbar from "react-perfect-scrollbar";
import "../vendor/perfect-scrollbar.css";

import { spacing } from "@material-ui/system";

const Scrollbar = styled(PerfectScrollbar)`
    height: 300px;
`;

const FormControlSpacing = styled(MuiFormControl)(spacing);
const FormControl = styled(FormControlSpacing)`
   min-width: 200px;
`;

const Select = styled(MuiSelect)(spacing);
const MenuProps = {
   MenuListProps: {
      component: Scrollbar,
   },
};

return (
    <React.Fragment>
        <FormControl variant="outlined" m={3}>
            <InputLabel id="select-label" shrink>SELECT LIST</InputLabel>
            <Select
               ...
               MenuProps={MenuProps}
            >
                {selectList.map((item) => (
                    <MenuItem key={item.value} value={item.value}>{item.text}</MenuItem>
                ))}
            </Select>
        </FormControl
    </React.Fragment>
)

【讨论】：

【解决方案3】：

只是对@Alexandre 答案的改进，在不需要滚动时自动高度。

示例：当用户开始输入 select 并且选项减少到只有一两个时

比较props.children.length而不是7，只使用滚动条可见时可见的选项总数。

function MenuList(props) {
   return (
     <div style={{height: props.children.length >= 7 ? 300 : "unset"}}>
        <PerfectScrollbar>{props.children}</PerfectScrollbar>
     </div>
      );
}

【讨论】：