css - マットテーブルの行の高さを変更する方法

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」などを使用しようとしましたが、使用できません。