角度材料.突出显示鼠标悬停的表格行

Question

我们正在为我们的应用使用Angular Material表:

https://material.angular.io/components/table/overview

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

你能否展示如何在鼠标悬停上突出显示一行？

Answer 1

使用:hover选择器向mat-row元素添加一些CSS :

.mat-row:hover {
  background-color: red;
}

StackBlitz演示

Answer 2

您可以在主题文件中为组件设置样式：

 @mixin newName-theme($dark-theme)

    mat-table tbody tr:hover{
    cursor: pointer;
    background: #b4b4b433;
  }

 @include newName-theme($dark-theme);

你可以在这里找到更多的例子

Answer 3

就我而言 .mat-row:hover 不起作用，它突出显示了整个表格。这对我有用：

  tr.mat-row:hover {
      background-color: yellow;
  }

Answer 4

Angular 15 稍微改变了这一点。我现在正在使用：

  tr.mat-mdc-row:hover {
      background-color: yellow;
  }