时间戳

首页 > 解决方案 > Angular + mat-table：用突出显示覆盖垫表行颜色

angular - Angular + mat-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;
}

标签： angularangular-materialmat-table

解决方案

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

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

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

推荐阅读