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

Issue

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

Solution

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

Answered By – robbieAreBest

Answer Checked By – Terry (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.