Angular Material：如何更改 mat-grid-tile 的顶部填充

Question

我正在使用 角度为 5 的角度材料。mat-grid-tile 有它自己的顶部填充，使用 calc 方法计算。

我想在 mat-grid-tile 上设置自定义填充。我怎样才能做到这一点？

原文由 Sony Khan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

网格图块组件在元素本身上动态设置顶部填充，因此您需要在 CSS 中使用 !important 修饰符来覆盖它。

HTML:

 <mat-grid-tile class="my-grid-tile"></mat-grid-tile>

CSS：

 .my-grid-tile {
    padding-top: 24px !important;
}

原文由 G. Tranter 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

设置 mat-grid-list 的 rowHeight 对我有用，G.Tranter 不起作用，因为 mat-grid-list 有一个填充它也是动态设置的，不能用 !important 设置。

  <!-- 70px to prevent hide floatLabel in matInput -->
 <mat-grid-list cols="2" rowHeight="70px">
    <mat-grid-tile>
       <!-- your controls -->
    </mat-grid-tile>
  </mat-grid-list>

参考： https ://material.angular.io/components/grid-list/examples

 "@angular/material": "^6.4.3"
"@angular/core": "^6.1.0"

原文由 Juan Pablo 发布，翻译遵循 CC BY-SA 4.0 许可协议