html - 如何在悬停时有条件地将 css 应用到 mat-row 元素？

Question

我有一个包含行的表格，当满足特定条件(对于每行)时，背景颜色为浅红色。 对于每一行，在悬停时，我将背景更改为浅灰色。 问题是，我希望特殊行(那些已经获得浅红色的行)在悬停时用更深的红色着色(而不是像所有其他行一样呈灰色)。

我能得到的最佳结果是让红色行在悬停时将单个列着色为深红色，但该行的其余部分仍然涂成灰色。

.css(没有单列着色错误):

.cheaterRow {
  background-color: rgb(255, 130, 130);
}

.mat-row:hover{
  background-color:rgb(201, 201, 201);
}

.html:

<table
mat-table
[dataSource]="dataSource"
matSort
matSortActive="score"
matSortDirection="desc"
*ngIf="!loadingData; else loading"
class="row"
>
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef mat-sort-header 
 class="sortHeader">
        No.
    </th>
    <td mat-cell *matCellDef="let element">{{ element.id }}</td>
  </ng-container>

<ng-container matColumnDef="name">
  <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
  <td mat-cell *matCellDef="let element">{{ element.name | titlecase }}</td>
</ng-container>

<ng-container matColumnDef="level">
  <th mat-header-cell *matHeaderCellDef>
    <mat-form-field>
      <mat-label>Level</mat-label>
      <mat-select (selectionChange)="onChangeLevel($event.value)">
        <mat-option>None</mat-option>
        <mat-option *ngFor="let level of levels" [value]="level.value">
          {{ level.value | titlecase }}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </th>
  <td mat-cell *matCellDef="let element">
    {{ element.level | titlecase }}
  </td>
</ng-container>

<ng-container matColumnDef="score">
  <th mat-header-cell *matHeaderCellDef mat-sort-header>Score</th>
  <td mat-cell *matCellDef="let element">{{ element.score }}</td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr
  mat-row
  *matRowDef="let row; let even = even; columns: displayedColumns"
  [class.cheaterRow]="isCheater(row.id)"
></tr>
</table>

我希望整行在悬停时具有不同的颜色(取决于条件)。

Answer 1

通过在 css 中编写类，使用自定义条件在表中创建最后一个 tr(我的 css 类是正、负、取消、突出显示)

<tr 
     [ngClass]="{'positive' :(row.status?row.status===1:false) , 
      'negative' :(row.status?row.status===2:false)  ,
      'cancelled':(row.status?row.status===4:false),
      'highlight': selectedRowIndex == row}"

        mat-row *matRowDef="let row; columns: displayedColumns;">
 </tr>