如何有條件地為 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;
}

我們使用同構樣式加載器