Angular 16: How do I change the background color of every second row in mat-table and the row background color on hover?

Question

Recently I have upgraded my project from Angular 13 to Angular 16. Post that the CSS workaround I was done for the mat row color on hover and alternate row color is not working . I have found so many references in stack overflow itself but nothing helped.

Tried by adding the css in specific component and the style.scss file too. but no luck.

.mat-row:nth-child(odd) {
  background-color: #FFFFFF;
}
.mat-row:nth-child(even) {
  background-color: #F8F8F8;
}
.tr.mat-row:hover{
  background-color: #87CEEB !important;
}

can somebody help me to resolve it.

Answer 1

In Angular v16, classes were changed from .mat-row to .mat-mdc-row.

Simply add the following CSS in styles.scss:

.mat-mdc-row:nth-child(odd) {
  background-color: #FFFFFF;
}

.mat-mdc-row:nth-child(even) {
  background-color: #F8F8F8;
}

.mat-mdc-row:hover{
  background-color: #87CEEB !important;
}

See the live demo.