Angular material table 垫子行悬停更改预设背景颜色

Question

我有一个 angular material table，在列名称上有预设背景颜色

.mat-column-name {
  background-color: grey;
}

但是当我尝试在悬停时更改背景颜色时，列名称不会更改背景颜色

.mat-row:hover {
  background-color: red;
}

如何强制改变？我尝试把 !important 也不起作用 这是演示 stackblitz

Answer 1

您应该添加另一个更具体的 CSS 规则，以便 name 列在悬停该行时也具有红色背景。试试这个：

.mat-row:hover,
.mat-row:hover .mat-column-name {
  background-color: red;
}