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

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

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

完美解决。

你可能感兴趣的:(antd,antd,style)