Angular 4 Material表突出显示一行并更改所选行的颜色

时间:2019-03-28 09:23:00

标签: angular angular-material material

我想在垫子表中选择行时更改其颜色。
对于background color我已经知道了,但是如果我在表中选择了它,就无法在white中更改行颜色

2 个答案:

答案 0 :(得分:0)

您能尝试一下吗?

在html中:

  <mat-row [ngClass]="{'selected': selectedRowIndex == row.id}">
    </mat-row>

在CSS中:

.selected {
    color: white;
}

答案 1 :(得分:0)

您可以将class="table-row"tabindex="1"的默认类别添加为<mat-row>

<mat-row class="table-row" tabindex="1" 
*matRowDef="let row; columns: displayedColumns;"></mat-row>

然后,在css文件中写入

.table-row:focus {
  background: tomato;
  outline: none;
}
.table-row:focus mat-cell {
  color: white; 
}

Stackblitz Demo highlighting table row on click with changed color