问题描述

在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; 在使用上面修改滚动条的样式就可以了。