reactjs - 如何有条件地为 AntD 表中的特定行着色

Question

我正在尝试根据来自表数据源的一些数据为整行着色。

我已经看到您可以使用rowClassName，但不太了解它是如何工作的。

会喜欢一些打字稿的例子！谢谢！

<Table
  columns={cols}
  dataSource={data}
  rowKey={(record: obj) => record.key}
  rowClassName={(record: obj) => record.amount == '0' ? <???> : ''}
/>

Answer 1

这是我们代码库中的一个示例：

import s from './styles.css'

useStyles(s)
...
 rowClassName={(_r, i) => (i % 2 ? s.odd : s.even)}

在一个css文件中：

.odd {
  background: color(var(--midnight-5) alpha(50%));
}

.even {
  background-color: #f8f9fa;
}

我们使用同构样式加载器