将 rowStyleClass 应用于 PrimeReact DataTable 中的每一行

Question

我有数据，每个 row/user 的格式如下：

{
  first: <string>
  active: <bool>
}

如果 active 属性为 false，我希望对整行应用背景颜色。目前我有这个，试图将样式应用于每一行

rowClassName = (rowData) => {
    return {'greyed' : true}; //will be {'greyed': !rowData.active} but this is for demonstration
}

<DataTable value={this.props.users.toJS()} //in render
    selectionMode="single"
    selection={user}
    onSelectionChange={this.props.dispatch.editAccount}
    rowClassName={this.rowClassName}
>
    <Column field="first" header="First" filter={true}/>
</DataTable>

.greyed{ //in css
    background-color: red;
}

仅将样式应用于每隔一行（见图）

关于我应该尝试什么有什么想法吗？我 3 天前在 primeFaces 论坛上发布了这个问题，但从未得到回复：https://forum.primefaces.org/viewtopic.php?f=57&t=58605

Answer 1

通过像这样

覆盖 css 来解决

.ui-datatable tbody > tr.ui-widget-content.greyed { 
        background-color: #808080;
}

Answer 2

我在试用 PrimeReact 时运行遇到了这个问题。我的问题原来是设置行背景的默认选择器比我自己的更具体。

这是默认值：

body .p-datatable .p-datatable-tbody > tr:nth-child(even) {
    background-color: #f9f9f9;
}

所以只有

.specialRowColor { background-color: 'blue' }

不够具体，无法覆盖默认值。相反，我需要在 css:

中执行此操作

.p-datatable .p-datatable-tbody .specialRowColor {
    background-color: blue;
}

将 rowStyleClass 应用于 PrimeReact DataTable 中的每一行

Apply rowStyleClass to every row in PrimeReact DataTable

reactjs

datatable

primereact