如何在 primeNg p-table 中取消选择行时更改颜色？

Question

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

我试过这个来覆盖：

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 样式将更改行和 select 行颜色 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;
}

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


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

demo

如何在 primeNg p-table 中取消选择行时更改颜色？

How to change the color when the row is unselected in the primeNg p-table?

css

sass

primeng

angular

p-table