Как интегрировать react-perfect-scrollbar с react-select
Я хочу применить стиль к полосе прокрутки, стиль полосы прокрутки отлично работает в Chrome с использованием css. но не работает в Firefox и Iexplore.
Следовательно, я выбрал идеальную полосу прокрутки, но полоса прокрутки не перемещается должным образом, если мы перемещаемся по параметрам с помощью клавиш со стрелками, положение прокрутки не изменяется.
Ниже приведена демонстрационная ссылка:
https://codesandbox.io/s/18pvjy0olj
Заранее спасибо!
Ответы 3
В основном вам нужно использовать компонент 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
Просто улучшение ответа @Alexandre на автоматическую высоту при прокрутке не нужно.
Пример: когда пользователи начинают печатать в select, и параметры сокращаются до одного или двух
Вместо 7 для сравнения props.children.length просто используйте общее количество параметров, которые видны, когда видна полоса прокрутки.
function MenuList(props) {
return (
<div style = {{height: props.children.length >= 7 ? 300 : "unset"}}>
<PerfectScrollbar>{props.children}</PerfectScrollbar>
</div>
);
}
Вам нужно установить полосу прокрутки в 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>
)