react-select 的移动滚动条默认为浏览器样式？答案

【问题标题】：Mobile scrollbar for react-select defaults to browser style?react-select 的移动滚动条默认为浏览器样式？
【发布时间】：2021-01-15 17:10:21
【问题描述】：

我有一个带有自定义滚动条的 react-select 组件，它可以在桌面浏览器中按预期工作，但在移动设备上，滚动条默认为浏览器值。

引用 a similar github issue 和 a similar stackoverflow issue 并没有帮助解决此问题。

const styles = {
  menu: provided => ({
    ...provided,
    width: '100%',
    height: '240px',
    boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
    overflowY: 'scroll',
    '::-webkit-scrollbar-thumb': {
      background: royal, // imported color string
      height: '50px',
    },
    '::-webkit-scrollbar-thumb:hover': {
      background: royal,
      height: '50px',
    },
    '::-webkit-scrollbar-track': {
      background: softGrey,
    },
    '::-webkit-scrollbar': {
      width: '4px',
      background: softGrey,
    },
  }),
  menuList: () => ({
    '::-webkit-scrollbar': {
      width: '4px',
    },
  }),
}

<Select
  placeholder={placeholder}
  styles={styles}
  onMenuOpen={onOpenHandler}
  onMenuClose={onCloseHandler}
  onChange={onChangeHandler}
  onInputChange={() => {}}
  controlShouldRenderValue
  label={label}
  value={value}
  defaultValue={defaultValue}
  options={options}
/>

github 引用使用 menuList，但我发现使用 menu 和 menuList 让我得到了想要的样式。我尝试了以下所有变体：

使用 !important
仅移动到 menuList
在 menu 和 menuList 中都有
使用 react-select v2 (2.4.1) 和 v3 (3.2.0)

【问题讨论】：

标签： react-select