从“ mat-grid-tile”中删除多余的填充物

Question

我在Angular Material的mat-grid-tile组件下使用mat-grid-list时，在UI上获得了很多额外的空白。

<span *ngFor="let row of rowsArr" class="rowClass">
    <mat-grid-list cols="{{row.colsArr.length}}">
        <mat-grid-tile *ngFor="let col of row.cols">
            <app-sample-component [col]=col></app-sample-component>
        </mat-grid-tile>
    </mat-grid-list> 
</span>

以上是一个示例代码片段。在开发工具中进行检查时，我发现一些padding-top和padding-bottom是使用css的calc()函数动态计算的（例如-padding-top: calc((100% - 0px) * 1 + 0px)），并应用于UI。

我想覆盖或禁用这些CSS。禁用或覆盖此CSS可以解决此问题。

[请帮助我，删除这些填充。

前提条件-请不要在rowHeight组件中使用mat-grid-list属性，因为每个col具有不同的实现类型。例如-col可以是简单的文本组件，也可以是表格，可以是图像，也可以是其他东西。

谢谢你。

Answer 1

为了覆盖所应用的CSS，我认为您可以在mat-grid-list上方的标签上添加一类自定义样式，并根据需要制作padding-bottom和padding-top。添加！important

Answer 2

我搜索了此问题，是的，第一个孩子和最后一个孩子分别具有padding-left和right，