Css Angular2材质上的卡片标题背景色

我原以为这会很简单，但我正在努力在Angular2材质中设置卡片标题的背景色，我找不到任何示例。因此，鉴于以下代码，我将非常感谢关于如何设置md卡标题背景颜色的提示：

<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>

标题
字幕
正文

角度材质使用选项板，因此有两种方法：

覆盖当前调色板中的主题颜色（或创建自己的调色板）

使用

！重要信息

覆盖默认颜色的标志（如果没有该标志不起作用，并且在许多情况下不起作用），如下：

md卡标题{背景色：绿色！重要；}

（在某些情况下，您还需要

：：ng deep

来访问这些元素）

使用或

---

以下任一选项都有助于设置标题背景：

使用

：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;
}

在组件装饰器上使用

封装：视图封装.None

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

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

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

---

只需在

选择器中添加

[style.backgroundColor]=“您想要的颜色”

：

<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>

并在

选择器中设置

[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>

---

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

...
...

没错，OP应该检查DOM并检测他/她应该更改的元素的样式。对于动态生成的元素，这些元素不在组件的HTML中，我们应该使用

：：ng deep

或

/deep/

。我知道

：：deep

将被删除，但不知道

封装：ViewEncapsulation。无
，感谢您提供的信息！无论如何，没有
：ng deep
和
封装的生活将非常艰难，我们需要访问阴影DOM的方法（或者如何正确地调用它）。难道材质不能解释“重音”或“警告”之类的颜色吗？如果你不能使用配色方案，那么使用配色方案有什么意义呢？这种方法的问题在于它不支持圆角。它看起来很奇怪，页眉或页脚有一个大的白色边框，就像演示中的前两张卡一样。如果你去掉了内置的填充物，你就会像演示中的第三张卡一样，看到传统的尖角。我认为OP是在寻找如何应用背景色的同时仍然保留垫子卡片样式（即现代圆角），至少这是我想要的。
.custom-card {
  background-color: gray;
}

<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>

<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>