antd-5版本table组件修改滚动条样式不生效问题

问题描述

在react项目中使用antd-ProComponents组件库的Protable组件时修改table自带的滚动条样式不生效。

排查记录

一般来说直接table组件库要自定义滚动条的样式，只需要修改 ant-table-body 的样式即可，代码如下：

     .ant-table-body {&::-webkit-scrollbar {width: 50px;}/* 滚动条滑块 */&::-webkit-scrollbar-thumb {background: #888;border-radius: 10px;}/* 滚动条轨道 */&::-webkit-scrollbar-track {background: #f0f0f0;}/* 滚动条轨道的两端按钮 */&::-webkit-scrollbar-button {height: 5px;background-color: #ccc;}/* 滚动条的角落 */&::-webkit-scrollbar-corner {background-color: #f0f0f0;}}

可是不管怎样进行滚动条样式的修改都不生效，找了挺久终于找到了到这个问题的原因，是因为antd-table 中 scrollbar-color属性覆盖伪类元素导致的，只需要将antd-table的属性覆盖为 scrollbar-color: auto; 在使用上面修改滚动条的样式就可以了。