antd5版本修改Table组件滚动条样式

因为项目需求,要将Table组件的样式修改为UI图所给的效果,但是怎么写都不生效

最后发现在

 .ant-table的样式中设了scrollbar-color,只要把这里的样式设为scrollbar-color: auto;

然后再改.ant-table-body里面滚动条的样式,就可以了

      .ant-table-body{
            &::-webkit-scrollbar {
              background: rgba(0, 0, 0, 0);
              width: 4px;
              height: 4px;
            }
            /* 滚动条轨道的样式 */
            &::-webkit-scrollbar-track {
              background: #888 !important; /* 轨道背景颜色 */
              border-radius: 6px !important; /* 轨道圆角 */
            }
    
            /* 滚动条滑块的样式 */
            &::-webkit-scrollbar-thumb {
              background: rgba(37, 36, 36, 0.8);
              border-radius: 3px;
              width: 4px;
            }
      }

 

posted @ 2024-08-22 15:46  wenwen。  阅读(235)  评论(0编辑  收藏  举报