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
    }
}

完美解決。