Убрать лишнюю обивку с «мат-сетка-плитка»

Question

Я получаю много лишних пробелов в пользовательском интерфейсе при использовании mat-grid-tile под mat-grid-list компонентом Angular Material.

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

Вот пример фрагмента кода. При проверке в Dev Tools я обнаружил, что некоторые padding-top и padding-bottom вычисляются динамически с использованием calc() функции css (например, - padding-top: calc((100% - 0px) * 1 + 0px)) и применяются в пользовательском интерфейсе.

Я хочу переопределить или отключить эти типы CSS. Отключение или переопределение этого CSS может решить эту проблему.

Пожалуйста, помогите мне удалить эти отступы.

Предварительное условие - Пожалуйста, не используйте свойство rowHeight в компоненте mat-grid-list, потому что каждый столбец имеет разные виды реализации. Например, col может быть простым текстовым компонентом, таблицей, изображением или чем-то еще.

Заранее спасибо.

Answer 1

Я искал эту проблему, и да, первый и последний дочерние элементы имеют отступы слева и справа соответственно,

см. Дополнительную информацию: 1.) https://github.com/angular/components/issues/11232

2.) Angular Материал: Как изменить верхнее заполнение 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 2

Для переопределения примененного 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;
      }
    }   

Надеюсь, это решит вашу проблему.