Angular2 材质上的卡片标题背景颜色答案

【问题标题】：Card header background color on Angular2 materialsAngular2 材质上的卡片标题背景颜色
【发布时间】：2018-03-02 02:21:06
【问题描述】：

我认为这很简单，但我正在努力在 Angular2 材料中设置卡片标题的背景颜色，但我没有找到任何示例。因此，鉴于以下代码，我将不胜感激有关如何设置 md-card-title 的背景颜色的提示：

<md-card>
   <md-card-header>
      <md-card-title>Title</md-card-title>
      <md-card-subtitle>Subtitle</md-card-subtitle>
   </md-card-header>
   <md-card-content>
       Body text
   </md-card-content>
</md-card>

【问题讨论】：

标签： angular angular-material angular-material2

【解决方案1】：

只需在您的<md-card-header> 选择器中添加[style.backgroundColor]="'COLOR_YOU_WANT'"：

<md-card>
   <md-card-header [style.backgroundColor]="'yellow'"> 
      <md-card-title>Title</md-card-title>
      <md-card-subtitle>Subtitle</md-card-subtitle>
   </md-card-header>
   <md-card-content>
       Body text
   </md-card-content>
</md-card>

链接到working demo。

或者，在您的 css 文件中添加一个类：

.custom-card {
  background-color: gray;
}

并在您的<md-card-header> 选择器中设置[ngClass]：

<md-card>
   <md-card-header [ngClass]="{'custom-card':true}"> 
      <md-card-title>Title</md-card-title>
      <md-card-subtitle>Subtitle</md-card-subtitle>
   </md-card-header>
   <md-card-content>
       Body text
   </md-card-content>
</md-card>

或者另一种选择是使用[ngStyle]：

<md-card [ngStyle]="{'padding':'0px'}">
   <md-card-header [ngStyle]="{'background-color':'green'}"> 
      <md-card-title [ngStyle]="{'font-size':'24px'}">Title</md-card-title>
      <md-card-subtitle [ngStyle]="{'font-size':'12px', 'color':'white'}">Subtitle</md-card-subtitle>
   </md-card-header>
   <md-card-content>
       Body text
   </md-card-content>
</md-card>

【讨论】：

Material 不应该能够解释诸如“强调”或“警告”之类的颜色吗？如果您不能使用配色方案，那么使用它有什么意义？
这种方法的问题是它不支持圆角。它看起来很奇怪，页眉或页脚中有一个大的白色边框，就像演示中的前两张卡片一样，如果你删除内置的填充，你最终会得到传统的尖角，就像演示中的第三张卡片一样。我认为 OP 正在寻找如何应用背景颜色，同时仍保留 mat-card 样式（即现代圆角），至少这就是我正在寻找的。span>

【解决方案2】：

其中任何一个都有助于设置标题背景：

使用::ng-deep

::ng-deep .mat-card-header {
    background-color: red !important;
    padding: 5px !important;
}

::ng-deep .mat-card {
    padding: 0 !important;
}

::ng-deep .mat-card-content {
    padding: 5px !important;
}

DEMO

在组件装饰器上使用encapsulation: ViewEncapsulation.None

.mat-card-header {
    background-color: red !important;
    padding: 5px !important;
}

.mat-card {
    padding: 0 !important;
}

.mat-card-content {
    padding: 5px !important;
}

DEMO

【讨论】：

你是对的，OP应该检查DOM并检测他/她应该改变哪个元素的样式。对于不在组件 HTML 中的动态生成的元素，我们应该使用 ::ng-deep 或 /deep/。
我知道::deep 会被贬低，但不知道encapsulation: ViewEncapsulation.None，谢谢你的信息！
不管怎样，没有::ng-deep 和encapsulation 的日子会很艰难，我们需要一种访问shadow DOM 的方法（或者如何正确调用它）。

【解决方案3】：

Angular Material使用调色板，所以有两种方式：

直接在当前调色板中覆盖主题颜色（或创建您自己的调色板）
使用!important 标志覆盖默认颜色（如果没有标志这不起作用，并且在许多情况下它不起作用），像这样：md-card-title { background-color: green !important; }（在某些情况下你需要::ng-deep很好地访问这些元素）

::ng-deep md-card-title {
  background-color: green !important;
}

使用NgStyle 或NgClass

【讨论】：

【解决方案4】：

您可以将填充 0 设置为 mat-card 并将填充设置为卡片内部元素（mat-card-header、mat-card-content）：

<mat-card style="padding:0"> <mat-card-header style="padding:1rem; backgorund-color: blue"> ... </mat-card-header> <mat-card-content style="padding:1rem"> ... </mat-card-contetn> </mat-card>

【讨论】：