角材料。在鼠标悬停时突出显示表格行答案

【问题标题】：Angular Material. to highlight a table row on mouse over角材料。在鼠标悬停时突出显示表格行
【发布时间】：2018-04-09 19:17:19
【问题描述】：

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

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

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

能否请您演示如何在鼠标悬停时突出显示一行？

【问题讨论】：

标签： angular-material angular-material2

【解决方案1】：

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

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

StackBlitz demo

【讨论】：

我的意思是这样的：(onmouseover) highlightRow.indexOf(row) style.background = 'grey'
这不是Material 方式 - 如果您更改主题，那么所有其他材质悬停都会更改，但不会更改这个特定的
这不会改变主题，这是对 Material 主题行为的补充。你能指定这样做的“材料方式”是什么吗？
用户 tr.mat-row:hover 代替
!important 对我来说是必要的

【解决方案2】：

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

 @mixin newName-theme($dark-theme)

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

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

您可以找到更多示例here

【讨论】：

这更好，因为它允许您轻松地为您可能在同一项目中使用的不同主题设置不同的悬停颜色。但我不得不使用tr.mat-row:hover

【解决方案3】：

在我的情况下 .mat-row:hover 不起作用，它突出显示了整个表格。这对我有用：

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

【讨论】：

【解决方案4】：

Angular Material 目前具有该功能 here 但如果您想要更多风格，here 是我的解决方案

【讨论】：

如果你能引用一些文档就好了。包含大部分链接的答案可能会被删除
其实没有，你可以看到链接的stackblitz应用了tr.example-element-row:not(.example-expanded-row):hover { background: #777; }的自定义样式。它与默认材质样式无关。

【解决方案5】：

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

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

【讨论】：