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 ，以便它可以覆盖预先应用的CSS。

因此您的代码应如下所示：


    <span *ngFor="let row of rowsArr" class="rowClass custom">
        <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>

并将以下代码添加到您的CSS文件中。


    .custom {
      mat-grid-list {
        padding-bottom: 0px !important;
      }
      mat-grid-tile{
        padding-top: 0px !important;
      }
    }

我希望这能解决您的问题。

Answer 2

我搜索了这个问题，是的，第一个孩子和最后一个孩子分别具有左填充和右填充，

有关更多信息，请参阅： 1.）https://github.com/angular/components/issues/11232

2。）Angular Material: How to change top padding of mat-grid-tile

您还可以通过应用以下代码来删除这些填充：

.mat-table {
  mat-row, mat-header-row, mat-footer-row {
    padding-left: 24px;
    padding-right: 24px;
  }

  mat-cell:first-child, mat-footer-cell:first-child, mat-header-cell:first-child {
    padding-left: 0;
  }

  mat-cell:last-child, mat-footer-cell:last-child, mat-header-cell:last-child {
    padding-right: 0;
  }
}

Answer 3

建议添加gutterSize

试试这个

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

我希望这会有所帮助。

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

3 个答案: