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

演示