Angular + mat-table：用突出显示覆盖垫表行颜色答案

【问题标题】：Angular + mat-table: Override mat table row color with highlightAngular + mat-table：用突出显示覆盖垫表行颜色
【发布时间】：2021-11-19 13:47:30
【问题描述】：

我有一张替换颜色的垫子：

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

【问题讨论】：

标签： angular angular-material mat-table

【解决方案1】：

由于您的奇数颜色规则正在更改 mat-cell 的背景，您需要在单元格级别而不是行级别设置突出显示背景：

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

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

【讨论】：