Angular + mat-table: 用高亮覆盖 mat table 行颜色

Question

我有一个垫子-table 有不同的颜色：

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

我已经实现了行高亮：

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

由于颜色不同，这仅适用于偶数行。是否可以覆盖它？或者可能在打字稿中禁用 .mat-row:nth-child(odd)?

在这里使用 !important 无效：

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

Answer 1

由于您的奇色规则正在更改 mat-cell 的背景，因此您需要在单元格级别而不是行级别设置高亮背景：

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

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

Angular + mat-table: 用高亮覆盖 mat table 行颜色

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

angular-material

angular

mat-table