4

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


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

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

提前致谢！

4

3 回答 3

1

您需要将 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>
)
于 2021-05-27T20:57:23.410 回答
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

于 2019-02-19T15:56:16.987 回答
0

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

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

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

function MenuList(props) {
   return (
     <div style={{height: props.children.length >= 7 ? 300 : "unset"}}>
        <PerfectScrollbar>{props.children}</PerfectScrollbar>
     </div>
      );
}
于 2020-12-24T10:36:13.827 回答