Angular + mat-table: Override mat table row color with highlight

Question

I have a mat-table with alternate colors:

.mat-row:nth-child(odd) .mat-cell {
   background-color: $tableRowOddColor;
}

I have implemented a row highlight with:

<mat-row
   *matRowDef="let row; columns: columnsToDisplay; let i = index"
   [ngClass]="{ highlight: selectedRowIndex === i }"
   (click)="getNabewerking(row, i)"
></mat-row>

This only works for the even rows, due to the alternate colors. Is it possible to override this? Or maybe disable the .mat-row:nth-child(odd) in typescript?

Using !important is not working here:

.highlight {
   background-color: #00a775 !important;
} 

Answer 1

Since your odd-color rule is changing the background of the mat-cell, you will want to set the highlight background at the cell level and not the row level:

.mat-row.highlight .mat-cell {
  background-color: #00a775;
}

https://stackblitz.com/edit/angular-3p6uy6?file=src%2Fapp%2Ftable-basic-example.ts