如何关闭隐藏的 Angular Material 类的 flex 布局

Question

在 Angular cli 开发环境中，我在名为 layout-grid.component.html 的文件中创建了一个带有单个图块的网格列表组件：

<md-grid-list cols="4" rowHeight="100px">
  <md-grid-tile
      *ngFor="let tile of tiles"
      [colspan]="tile.cols"
      [rowspan]="tile.rows"
      [style.background]="tile.color">
    <app-splash></app-splash>
  </md-grid-tile>
</md-grid-list>

网格图块中嵌入了一个名为 app-splash 的组件，其中包含单个图像：

<img src="../assets/horse.jpg" alt="Horse">

当我运行网络应用程序时，我看到图像位于图块的中间，但边缘有一个间隙。我希望 img 填充瓷砖。将检查器与 Chrome 一起使用，我发现罪魁祸首是隐藏的类：

.mat-grid-tile .mat-figure {
  align-items:center;
  bottom:0;
  display:flex;
  height:100%;
  justify-content:center;
  left:0;
  margin:0;
  padding:0;
  position:absolute;
  right:0;
  top:0;
}

如果我关闭 display: flex 属性，我会得到我需要的结果。如何在我的代码中关闭它？将网格列表组件的 css 设置为内联没有任何作用。我需要更改打字稿吗？ layout-grid.component.ts 如下：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-layout-grid',
  templateUrl: './layout-grid.component.html',
  styleUrls: ['./layout-grid.component.css']
})
export class LayoutGridComponent implements OnInit {

  tiles = [
    {text: 'One', cols: 4, rows: 10, color: 'lightblue'},
  ];

  constructor() { }

  ngOnInit() {
  }

Answer 1

在 /layout-grid.componet.css 中添加：

::ng-deep md-grid-tile.mat-grid-tile .mat-figure {
  display: block !important; /* or whichever you need */
}

这将覆盖角度材质 css 中的那个。