为 Angular Material 卡片的 header 设置背景颜色

Question

They are using it throughout the documentation but I cannot find how to do add color to the header myself.

我假设有一种方法可以在不从卡上移除填充的情况下获得全出血颜色 header。 mat-card-title-group 也保留在卡片填充内。

<mat-card>
    <mat-card-title>Notes</mat-card-title>
    <mat-card-content>
        ...
    </mat-card-content>
</mat-card>

我应该查看另一个组件吗？

ps：我发现了关于 angular 1 的原始 angular material 的问题，但没有找到 2+ 的任何问题。

Answer 1

呈现的 mat-card-header 看起来像：

<mat-card-header _ngcontent-c22="" class="mat-card-header">
   ...
</mat-card-header>

因此您可以从其组件将其定位为：

.mat-card-header {
  background-color: red;
}

或从其 parent 组件 和：

::ng-deep .mat-card-header {
  background-color: red;
}

（您应该避免使用 parent 中的样式组件。）

编辑： 正如您在评论中所说，如果您想删除填充，您可以添加：

.mat-card {
   padding: 0; 
}

Setting background color for header of Angular Material Card