Как изменить эвавацию строки в мат-таблице

Question

Я пытаюсь поднять зависшую строку в мат-таблице, поэтому меняю высоту на <tr> при наведении, но возвышение - это эффект тени, который не отображается в нижней части ряда, а отображается для верхней, левой и правой сторонстроки.

.html

<div class="mat-elevation-z2" #TABLE>
      <table mat-table [dataSource]="dataSource" matSort>

    <!-- Required Columns... -->

    <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
        <tr mat-row *matRowDef="let row; let e = index; columns: columnsToDisplay;"
          (mouseover)="onMouseOver(e)" [ngClass] = "{'mat-elevation-z24' : e == mouseOverIndex}"></tr>
      </table>
    </div>

.ts

 mouseOverIndex = -1;

public onMouseOver(index) {
    this.mouseOverIndex = index;
  }

.css

.mat-row:hover {
  cursor: pointer;
}

Что мне здесь не хватает?

Я пытался использовать z24, z16, z8 и т. Д., Но безрезультатно.

Answer 1

выглядит так: background: inherit в строке перекрывает тень внизу.

добавление следующего к CSS решит эту проблему.

[mat-row].remove-background {
  background: none ;
}

Затем примените класс кваш ряд.

<tr mat-row class="remove-background" (mouseover)="onMouseOver(e)"

Stackblitz

https://stackblitz.com/edit/angular-ecrvzg?embed=1&file=app/table-basic-example.css