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

仅将样式应用于其他所有行（请参见图片）

关于我应该尝试什么的任何想法？我三天前在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;
}