如何更改角度材料表行高？

Question

在我的 Angular 应用程序（使用 Angular Material 设计）中，我需要使用 Material Table 显示一些数据。

该表有一个粘性页眉、几行和一个粘性页脚。

默认情况下，行的高度为 62.5px，我想覆盖这个值。

我怎样才能做到这一点？

我曾尝试覆盖 tr / tr.mat-row / tr.mat-h​​eader-row 等的 css 样式，但没有成功。我也尝试过使用 ::ng-deep 。

此外，我的粘性页脚行的高度为 48 像素，这是我没有设置的！！有谁知道发生了什么？

餐桌图片

我可以使用 ::ng-deep 编辑页脚行 css，我已将 font-weight 设置为bold，但是当我设置 height 属性时，没有任何反应。

::ng-deep tr.mat-footer-row {
border: 1px solid #e7e7e7;
font-weight: bold;
}

Answer 1

尝试将它添加到你的styles.scss 中。

tr.mat-footer-row {
        border: 1px solid #e7e7e7;
        font-weight: bold;
        height: #px !important;
}

Answer 2

在相关的一点上，我遇到了一个问题，我的 mat-table 行太高，并试图在 CSS 中设置高度以减少它。

事实证明，问题是“最小高度”已设置在“mat-h​​eader-row”和“mat-row”的某个深处（不在我的源代码中）。

修复方法很简单：

.mat-header-row, .mat-row {
  min-height: 30px;
}

Answer 3

要在 mat-table 中更改默认高度（48 px），您需要为 html 中的每一行指定一个类，例如，当您定义行时：

<tr mat-row *matRowDef="let row; columns: displayedCol;" class="table-row"></tr>

然后你可以覆盖高度，在你的主 css 文件中设置具有特定高度的类“table-row”，例如：

.table-row {
  height: 30px !important;
}

我们用 angular 7 和 angular material 版本 7.3.7 证明了这一点。

问候