如何在 Reactjs 中设置 Antd 表中所选行的颜色？

Question

我在react js中有一个Ant表，如下

        <TableAnt dataSource={mysource} columns={mycolumns}
                onRow={(record, rowIndex) => {
                    return {
                        onClick: event => {                                
                            getdetails(record);
                        }, 
                    };
                }}
            />
How can i change the color of a selected row ?      

Answer 1

在 Ant 表中，您可以通过使用带有条件类名称的

rowClassName

属性来更改所选行的颜色。

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

const TableSection = ({ dataSource, columns, getdetails }) => {
  const [selectedRowKey, setSelectedRowKey] = useState(null);

  const handleRowClick = (record) => {
    setSelectedRowKey(record.key);
    getdetails(record);
  };

  const rowClassName = (record) => {
    return record.key === selectedRowKey ? 'selected-row' : '';
  };

  return (
    <Table
      dataSource={dataSource}
      columns={columns}
      onRow={(record, rowIndex) => {
        return {
          onClick: (event) => {
            handleRowClick(record);
          },
        };
      }}
      rowClassName={rowClassName}
    />
  );
};

export default TableSection ;

所选行的 CSS 样式：

.selected-row {
  background-color: #EFEFEF;
}