如何修改Antd Table选中行背景色？React项目技术求助

问题排查 #

你的代码里存在三个核心问题导致自定义选中行样式不生效：

• 未正确绑定rowClassName函数：Table组件上写的是固定值rowClassName="now"，没有使用你定义的rowClassName判断函数
• 变量名错误：rowClassName函数里使用了未定义的selectedRowKey，实际应该用状态中的selectedRowKeys数组来判断当前行是否被选中
• CSS优先级不足：Antd默认的选中行样式有较高优先级，直接写.selected-row可能被覆盖

修复步骤与完整代码 #

1. 修正Table组件的rowClassName绑定

把Table上的rowClassName="now"替换为你定义的rowClassName函数

2. 修正rowClassName函数的判断逻辑

检查当前行的key是否存在于selectedRowKeys数组中，而不是对比单个未定义的变量

3. 提高自定义CSS的优先级

使用更具体的选择器，确保自定义样式能覆盖Antd默认样式

修复后的组件代码：

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

const columns = [
    {
        title: 'Name',
        dataIndex: 'name',
    },
    {
        title: 'Age',
        dataIndex: 'age',
    },
    {
        title: 'Address',
        dataIndex: 'address',
    },
];
const data = [];
for (let i = 0; i < 46; i++) {
    data.push({
        key: i,
        name: `Edward King ${i}`,
        age: 32,
        address: `London, Park Lane no. ${i}`,
    });
}

const TestTable = () => {
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    const [loading, setLoading] = useState(false);
    const start = () => {
        setLoading(true);
        setTimeout(() => {
            setSelectedRowKeys([]);
            setLoading(false);
        }, 1000);
    };
    const onSelectChange = (newSelectedRowKeys) => {
        console.log('selectedRowKeys changed: ', newSelectedRowKeys);
        setSelectedRowKeys(newSelectedRowKeys);
    };
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };

    // 修正判断逻辑：检查当前行key是否在选中数组中
    const rowClassName = (record) => {
        return selectedRowKeys.includes(record.key) ? 'selected-row' : '';
    };

    const hasSelected = selectedRowKeys.length > 0;
    return (
        <div>
            <div style={{ marginBottom: 16 }}>
                <Button type="primary" onClick={start} loading={loading}>
                    Reload
                </Button>
                <span style={{ marginLeft: 8 }}>
                    {hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}
                </span>
            </div>
            {/* 绑定正确的rowClassName函数 */}
            <Table 
                rowClassName={rowClassName} 
                className='time-table-row-select' 
                rowSelection={rowSelection} 
                columns={columns} 
                dataSource={data} 
            />
        </div>
    )
}

export default TestTable

修复后的CSS代码

/* 提高选择器优先级，确保覆盖Antd默认样式 */
.time-table-row-select .ant-table-tbody > tr.selected-row > td {
  background-color: red !important;
}

额外说明 #

如果不想用!important，可以进一步提高选择器的特异性，比如用Less/Sass嵌套写法：

.time-table-row-select {
  .ant-table-tbody {
    > tr.selected-row {
      > td {
        background-color: red;
      }
    }
  }
}

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