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

Question

在角度cli dev环境中,我在名为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">

当我运行Web应用程序时,我在图块中间看到图像,但边缘周围有间隙.我希望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;
}

如果我关闭显示: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中的那个.