react 要修改被封装的样式如何修改？

最新推荐文章于 2025-08-18 19:27:44 发布

原创最新推荐文章于 2025-08-18 19:27:44 发布 · 418 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #css

笔记同时被 2 个专栏收录

42 篇文章

订阅专栏

React

29 篇文章

订阅专栏

真是遇到了世纪难题，要修改antd table表格的颜色，但是公司已经将颜色主体封装进内部脚手架里，改一个就要全改。

解决方法：
在column中每项添加类名，然后找到源码，将源码中的公用部分替换成相应类名，此方法可以适用于各种css更改

let column = [
    {
      title: '行号',
      dataIndex: 'key',
      key: 'key',
      className: 'table-color-dust',
      width: 50,
      fixed: 'left',
    },
    ]

.table-color-dust替换原有的td
在这里插入图片描述

.darkBlue .ant-table-thead > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > .table-color-dust,
.darkBlue .ant-table-tbody > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > .table-color-dust,
.darkBlue .ant-table-thead > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > .table-color-dust,
.darkBlue .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > .table-color-dust,
.darkBlue .ant-table-row:not(.row-selected):nth-child(2n):hover > .table-color-dust {
  background: #fff !important;
}