解决 antd table rowClassName 属性不生效

解决办法

• 设置 rowClassName 时，使用 global 属性
• 使用 less 自定义的样式变量时，会不生效，请使用原生css样式属性
• 使用 !important 属性

以下为具体示例

JS 文件

import React, { useState, useEffect } from 'react';
import { Table } from 'antd';
import style from './HelloWorld.less'

interface Props {}
function HelloWorld(props: Props) {
  const [currentRowId, setCurrentRowId] = useState(null);
          /*  省去部分代码
          .
          .
          .
          */
  return (
    <div className={style.helloWorld}>
      <Table
        rowKey="id"
        loading={loading}
        dataSource={dataSource}
        columns={columns}
        onRow={record => {
          return {
            onClick: event => { setCurrentRowId(record.id) }, // 点击行
          };
        }}
        rowClassName={(record) => {
          return record.id == currentRowId ? 'defaultStyle' : ''
        }}
      />
    </div>
  );
}

export default HelloWorld;

CSS（此处使用less） 文件

@bgColor: #a9b0c2;
@bg: rgba(0, 0, 0, 0.9);

.helloWorld{
    min-height:300px;
    overflow: auto;
    :global{
        .ant-table-wrapper{
            .defaultStyle > td{
                background: #000 !important;
                color: #fff;
            }
        }
    }
}