Angular Material 2：如何设置 md-grid-tile 的样式？答案

【问题标题】：Angular Material 2 : How to style an md-grid-tile?Angular Material 2：如何设置 md-grid-tile 的样式？
【发布时间】：2018-01-06 04:37:35
【问题描述】：

 <md-grid-list cols="3" >
  <md-grid-tile style="overflow : scroll;align-items: initial;">

    <app-general style="padding-left : 1em;" ></app-general>

  </md-grid-tile>
  <md-grid-tile class="dummy" style="overflow : scroll;align-items: initial;">
    <app-slab2g style="padding-left : 1em;" > </app-slab2g>

  </md-grid-tile>

  <md-grid-tile style="overflow : scroll;align-items: initial;">
    <app-slab3g style="padding-left : 1em;" > </app-slab3g>


  </md-grid-tile>
</md-grid-list>

如何在 md-grid-tile 中以不同于默认中心对齐方式的方式对齐项目？

【问题讨论】：

标签： html css angular angular-material2

【解决方案1】：

您可以使用::ng-deep 覆盖md-grid-tile 的默认css。

css:

::ng-deep md-grid-tile.mat-grid-tile .mat-figure {
    align-items: initial;  /*vertical alignment*/
    justify-content: initial;  /*horizontal alignment*/
}

Plunker demo

【讨论】：

是的，但这会弄乱您使用网格图块的其他地方。
是的，我后来也注意到了。但我也找到了另一个修复方法。可能，过一段时间再贴吧
在 styles.css / styles.sccs 文件中全局设置样式，如下所示：mat-grid-tile.yourClass{ overflow:auto }，因为不推荐使用 ::ng-deep：angular.io/guide/component-styles#deprecated-deep--and-ng-deep

【解决方案2】：

为避免弄乱整个项目，请在组件中使用：

HTML：

<mat-grid-tile [colspan]="8" class="script-menu"> </mat-grid-tile>

CSS：

.script-menu >::ng-deep .mat-figure{
    justify-content: flex-start;
}

【讨论】：

尝试使用 :host ，将范围保持为组件本身，并且不会将 ng-deep 定义的样式泄漏到组件之外
好建议！ @AakashUniyal

【解决方案3】：

html

<mat-grid-tile class="title-tem">
  <div class="item-content">
    hi
  </div>
</mat-grid-tile>

css

 .title-tem >::ng-deep .mat-figure{
  align-items: flex-start;
  justify-content: flex-start;
}

这将是工作:)

【讨论】：

【解决方案4】：

这是迄今为止我发现的唯一可靠的解决方案。 !important 没用。 ::ng-deep 搞乱了主代码。如果你使用 div 并在 css 中使用 absolute，你可以按照你想要的方式对齐 div。

html

<mat-grid-tile *ngFor="let project of projects" 
        [style.background]="project.Color" (click)="openDialog(project)" >
        <div fxLayoutWrap fxLayoutAlign="start center" class="footer">

        </div>
</mat-grid-tile>

css

.footer {
    position: absolute;
    left: 5px;
    bottom: 5px;
  }

【讨论】：

【解决方案5】：

经过很多血和泪，我能够在不影响页面上其他网格的情况下设置有角材质网格的第一列。下面的样式将仅在此 <mat-grid-list> 中将人名左对齐并垂直居中。

角度材质网格：

<mat-grid-list cols="4" rowHeight="4:1">
    <mat-grid-tile colspan="2">
        <div class="leftVerticalAlign">
        Persons Name
        </div>
    </mat-grid-tile>
    <mat-grid-tile>Persons Phone</mat-grid-tile>
    <mat-grid-tile [style.border-left]="'12px solid gray'">Persons Email</mat-grid-tile>
</mat-grid-list>

难以捉摸的 CSS：

.leftVerticalAlign {
    left: 1em;    
    position: absolute;  
    top: 50%;
    transform: translate(0px, -50%);
    margin: 0;
}

我在其中添加了一个额外的border-left 样式作为应用样式的另一种方式，但它仅限于我注意到的样式。

有关水平和垂直对齐的更多信息，请查看w3schools

他们救了我的命。

【讨论】：

【解决方案6】：

::ng-deep is deprecated，别用了。
基于Customizing Angular Material component styles，默认情况下，您不能覆盖样式影响模板中其他组件的子元素。
一种做法是：

.your-component .mat-grid-tile .mat-figure {
  justify-content: flex-start;
}

【讨论】：