Angular Material。マウスオーバーでテーブル行を強調表示する

Question

Angularアプリのマテリアルテーブル：

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

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

マウスホバーで行を強調表示する方法を教えていただけますか？

Answer 1

:hoverセレクターでCSSをmat-row要素に追加します。

.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

現在、Angular Materialにはその機能があります here しかし、もっと様式化したい場合は、 こちら が私の解決策です

Answer 4

私の場合、.mat-row：hoverは機能しませんでした。テーブル全体が強調表示されていました。これは私のために働く：

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