CODEWITHSUNDEEP
angularangular-materialmat-table
Robin
Robin

Reputation: 521

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:

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

Upvotes: 1

Views: 1561

Answers (1)

robbieAreBest
robbieAreBest

Reputation: 1771

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

Upvotes: 2

Related Questions