React中如何设置Ant Design表格选中行的颜色？

结合你提供的现有代码，以下是两种实用的实现方式：

方法一：通过状态控制自定义行类名 #

这种方式更灵活，适合手动控制行选中状态的场景：

1. 在组件中添加状态，记录当前选中行的唯一标识（比如数据中的id字段）
2. 在点击行时更新选中状态
3. 给表格添加rowClassName属性，动态为选中行添加自定义类
4. 编写CSS样式修改选中行背景色

修改后的完整代码示例：

import { useState } from 'react';
import { Table } from 'antd';

const YourComponent = () => {
  // 记录选中行的唯一key
  const [selectedRowKey, setSelectedRowKey] = useState(null);

  // 你的详情获取函数
  const getdetails = (record) => {
    // 原有业务逻辑
  };

  return (
    <Table
      dataSource={mysource}
      columns={mycolumns}
      onRow={(record) => ({
        onClick: () => {
          getdetails(record);
          // 更新选中行的标识，这里假设record.id是唯一值
          setSelectedRowKey(record.id);
        }
      })}
      // 动态绑定行类名
      rowClassName={(record) => record.id === selectedRowKey ? 'custom-selected-row' : ''}
    />
  );
};

对应的CSS样式：

.custom-selected-row {
  background-color: #e6f7ff !important; /* 替换成你需要的颜色 */
}

/* 可选：调整选中行的hover状态 */
.custom-selected-row:hover {
  background-color: #bae7ff !important;
}

方法二：直接覆盖Ant Design默认样式 #

如果你的表格使用了Ant Design自带的rowSelection单选/多选功能，默认选中行会带有ant-table-row-selected类，直接通过CSS覆盖即可：

/* 全局样式或组件内全局样式 */
.ant-table-row-selected {
  background-color: #ffebee !important; /* 自定义颜色 */
}

/* 调整选中行的hover效果 */
.ant-table-row-selected:hover {
  background-color: #ffcdd2 !important;
}

注意事项 #

• 如果使用CSS Modules，需要用:global()包裹选择器才能生效：

:global(.ant-table-row-selected) {
  background-color: #e6f7ff;
}

• 使用!important是为了覆盖Ant Design默认样式的优先级，如果你能写出更具体的选择器，也可以不用!important。

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