Угловой материал. для выделения строки таблицы на мыши

мы используем таблицу углового материала для нашего приложения:

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

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

не могли бы вы показать, как выделить строку при наведении мыши?

Ответ 1

Добавьте CSS с помощью :hover селектора :hover к элементам mat-row:

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

Демо-версия StackBlitz

Ответ 2

Вы можете сделать это стилизацией компонента в файле темы:

 @mixin newName-theme($dark-theme)

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

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

вы можете найти больше примеров здесь

Ответ 3

Angular Material в настоящее время имеет эту функцию здесь , но если вы хотите больше стилизоваться, здесь - мое решение

Ответ 4

в моем случае .mat-row: hover не работал, он выделял всю таблицу. это работает для меня:

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