Ant Design不能修改样式，添加的className没有生效？看这里

我是用了antd的Table控件，想为table设置单双行不同颜色，于是使用了rowClassName

<Table
  pagination={dataPagination}
  columns={this.dataTableColumns}
  dataSource={this.dataSource}
  locale={{ emptyText: <NoContent/> }}
  onRow={this.onClickRow}
  rowClassName={this.setRowClassName}
/>

  // 选中行
  onClickRow = (record) => {
    return {
      onClick: () => {
        this.setState({
          rowId: record.id,
        });
      },
    };
  }
  setRowClassName = (record) => {
    return record.id === this.state.rowId ? 'clickRowStyl' : '';
  }

// 被选中的表格行的样式
.clickRowStyl{
  background-color #00b4ed
}
.ant-table-tbody>.clickRowStyl:hover>td {
 background-color #00b4ed
}
  

But

我定义的css没有生效。。。死活想不明白。

解决办法使用 :global 关键词控制自己写的css。

:global {
    // 被选中的表格行的样式
    .clickRowStyl{
      background-color #00b4ed
    }
    .ant-table-tbody>.clickRowStyl:hover>td {
     background-color #00b4ed
    }
}

完美解决。