React中AntD Table排序时默认样式覆盖自定义CSS的解决求助

方法一：提升自定义样式优先级 #

通过更具体的CSS选择器，确保自定义样式优先级高于AntD默认排序样式。

假设你的自定义disable类原样式如下：

.disable {
  background-color: #f5f5f5;
  color: #cccccc;
}

修改为结合AntD Table DOM结构的精准选择器：

/* 针对排序状态下的单元格，强制应用自定义行样式 */
.ant-table-tbody > tr.disable > td.ant-table-column-sort {
  background-color: #f5f5f5;
  color: #cccccc;
}

若优先级仍不足，可临时使用!important（建议仅针对该场景，避免全局滥用）：

.ant-table-tbody > tr.disable > td {
  background-color: #f5f5f5 !important;
  color: #cccccc !important;
}

方法二：全局覆盖排序默认样式 #

直接重置AntD排序时的单元格样式，让它继承行的自定义样式：

/* 取消排序状态下的默认背景色和文字色，继承行样式 */
.ant-table-column-sort {
  background-color: inherit !important;
  color: inherit !important;
}

此方法下，无论列是否排序，单元格都会沿用你通过rowClassName设置的行样式。

方法三：结合排序状态动态调整样式（进阶） #

若需更精细控制，可通过Table的onChange事件记录排序状态，再在rowClassName中结合该状态调整类名：

1. 在组件状态中保存排序信息：

constructor(props) {
  super(props);
  this.state = {
    codes: [],
    sortInfo: null // 存储当前排序的列和顺序
  };
}

// 监听Table排序变化
handleTableChange = (pagination, filters, sorter) => {
  this.setState({ sortInfo: sorter });
};

2. 在Table组件中绑定onChange事件并动态生成类名：

<Table
  size='small'
  dataSource={this.state.codes}
  rowClassName={(record, index) => {
    let className = '';
    if (record.package_name === null) {
      className = 'disable';
      // 若当前处于排序状态，追加自定义排序类
      if (this.state.sortInfo) {
        className += ' disable-sorted';
      }
    }
    return className;
  }}
  columns={[]}
  onChange={this.handleTableChange}
/>

3. 针对disable-sorted类编写样式：

.disable-sorted td.ant-table-column-sort {
  background-color: #f5f5f5;
  color: #cccccc;
}

内容的提问来源于stack exchange，提问作者The_elevator