角度材质：如何更改mat-grid-tile的顶部填充

Question

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

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

Answer 1

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

HTML：

halfChecked

CSS：

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

Answer 2

设置mat-grid-list的 rowHeight 对我有用，G。Tranter不起作用，因为mat-grid-list带有填充。它也是动态设置的，因此无法设置！重要。

 <!-- 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"

Answer 3

要摆脱垫网格砖顶部的填充，请使用以下代码行来限制垫网格砖的高度：

<mat-grid-list cols='2' rowHeight='200px'>
</mat-grid-list>

增加或减少像素以适合垫块内容的所有行。