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

Question

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

引用 a similar github issue and 没有帮助解决这个问题。

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
在菜单和菜单列表中都有
使用 react-select v2 (2.4.1) 和 v3 (3.2.0)

Answer 1

显然 iOS 14 webkit 不再支持自定义滚动条。

https://github.com/JedWatson/react-select/issues/4439#issuecomment-776297882

https://developer.apple.com/forums/thread/670065?answerId=654532022#654532022

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

Mobile scrollbar for react-select defaults to browser style?

react-select