angular - 你如何处理 material2 卡中带有 mat-card-header-text 的 div？

Question

我似乎无法将这个容器放在 md 卡中。

在我的 Material 卡中，我有这个:

<div class="mat-card-header-text"> </div>

我看到其他人注意到了它。它会在我的标题左侧造成 40px 的空间。似乎也没有 CSS 影响它。

我正在使用 Angular 4.x 和 Material2。

Answer 1

这个额外的 div 实际上很烦人。事实证明，您可以使用阴影穿刺对其应用样式，而无需更改 CSS 仿真模式。您可以使用::ng-deep 组合器执行此操作:

::ng-deep .mat-card-header-text {
  /* CSS styles go here */
  margin: 0px; // for example to remove the margin
}

您也可以只用您自己的 CSS 类替换整个 header :

<mat-card>
  <div class="your-header">
    <div class="your-title">
      Your title here
    </div>
  </div>
  <mat-card-content>
    Stuff goes here
  </mat-card-content>
</mat-card>