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

Question

我有数据，每一行/用户的格式如下：

{
  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

我在试用 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;
}

Answer 2

通过像这样覆盖css来解决

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