css - 如何在反应虚拟化的 MultiGrid 中更改滚动条的 CSS 样式？

Question

我正在使用反应虚拟化 MultiGrid 来显示数据。

https://github.com/bvaughn/react-virtualized/blob/master/docs/MultiGrid.md

我想更改 MultiGrid 中使用的滚动条的 CSS 样式。例如，我想应用类似的东西：

  &::-webkit-scrollbar-thumb {
    background: XXX;
  }
  &::-webkit-scrollbar-track {
    background: XXX;
  }

如何在反应虚拟化 MultiGrid 中应用上述样式的滚动条？

我尝试传递样式，但没有成功。一个例子将非常有帮助。

Answer 1

您可以通过这种方式将样式应用于滚动条：

&.your-element::-webkit-scrollbar {
  width: 15px;
}

&.your-element::-webkit-scrollbar-thumb {
  background-color: ${props => props.theme.colors.menuBorder};
  border-radius: ${props => props.theme.borderRadius.whitePanel};
}

但请记住，不建议更改默认的系统滚动条样式（因为它们在不同的操作系统和浏览器之间有所不同）并且可能会产生不良影响。