Question

我想将样式应用于滚动条，滚动条样式在使用css的chrome中效果很好。但不适用于Firefox和Iexplore。

因此，我选择了perfect-scroll-bar，但是如果我们使用箭头键导航选项，则滚动条不会按预期移动，

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

谢谢！

Answer 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>
)

Answer 2

基本上，您需要使用MenuList组件，并用完美的滚动条包装子项：

------- XML EXAMPLE ----------------
    <entry name="001606026760">
      <serial>001606026760</serial>
      <connected>yes</connected>
      <unsupported-version>no</unsupported-version>
      <hostname>us-583-int-fw-01</hostname>
      <ip-address>10.200.226.8</ip-address>
      <mac-addr></mac-addr>
      <uptime>72 days, 6:19:31</uptime>
      <family>200</family>
      <model>PA-200</model>
      <sw-version>8.0.0</sw-version>
      <app-version>8013-4681</app-version>
      <av-version>2599-3095</av-version>
      <wildfire-version>240995-243478</wildfire-version>
    </entry>


---
- hosts: localhost
  gather_facts: false

  tasks:
    - name: Get IP address from xmldata.
      xml:
        path: "data.xml"
        content: "text"
        xpath: "/entry/ip-address"
      register: test

    - set_fact:
        ip: "{{test['matches'][0]['ip-address']}}"

此外，不要忘记为父容器设置height属性：

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

并更新组件对象

  menuList: {
    height:300
  }

我对您的示例进行了更新：https://codesandbox.io/s/n5pmxp57n0

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

2 个答案: