Angular material table mat row hover change preset background color-CodePudding

I have a angular material table that have a preset background color on column name

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

but when I try to change the background color when hover, the column name it wont change the background color

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

How to force it change? I try put !important also not working This is demo stackblitz

CodePudding user response：

You should add another more specific CSS rule so that the name column will also have red background whenever the row is hovered. Try this:

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