在primeNg p表中未选择行时如何更改颜色？

Question

我试图在取消选择行时将行的颜色更改为不同的颜色。 此功能是由primeng 主题提供的。 我正在尝试覆盖它以自定义它。 无论如何我可以在未选择时更改行颜色，然后保持颜色直到再次选择该行？ 我在这里使用单选 p 表。

我试过这个来覆盖：

data-table p-table .ui-table.ui-table-hoverable-rows .ui-table-tbody > tr.ui-selectable-row:not(.ui-state-highlight):not(.ui-contextmenu-selected):hover {
   background-color: #2F96B4 !important;
}

但这只会改变悬停时的颜色。

这就是我在选择行时所拥有的：

data-table p-table .ui-table .ui-table-tbody > tr.ui-state-highlight {
   background-color: #007ad9;
   color: #ffffff;
}

Answer 1

此 css 样式将更改行并选择行颜色 style.css

p-table .ui-table-tbody > tr:not(.ui-state-highlight):not(.ui-contextmenu-selected) {
   background-color:orange !important;
}

p-table .ui-table .ui-table-tbody > tr.ui-state-highlight {
   background-color:green !important;
   color: #ffffff;
}

如果您不希望此样式影响所有组件，则可以使用自定义类

.light.ui-table .ui-table-tbody > tr:not(.ui-state-highlight):not(.ui-contextmenu-selected) {
   background-color:lightblue !important;
}

.light.ui-table .ui-table-tbody > tr.ui-state-highlight {
   background-color:lightyellow !important;
   color: #555 !important;
}

演示🚀