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

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 demo

Answer 2

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

 @mixin newName-theme($dark-theme)

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

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

您可以找到更多示例here

Answer 3

在我的情况下.mat-row：hover无法正常工作，它突出显示了整个表格。这对我有用：

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

Answer 4

Angular Material当前具有here 功能，但是如果您想进一步样式化，here是我的解决方案

Answer 5

这对我有用。我将Bootstrap 4类.table-hover应用于Angular材质表。

<table class="table-hover" mat-table>...</table>