Angular material table mat row hover change preset background color

Question

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

user_1440005 · Answer

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