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


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:

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

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;


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;

Answered By – robbieAreBest

Answer Checked By – Terry (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.