Angular2材料上的卡片头背景颜色

Question

我认为这很简单,但我很难在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>

Answer 1

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

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

链接到工作演示.

或者,在css文件中添加一个类:

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

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

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

Answer 2

Angular Material 使用调色板，因此有两种方式：

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

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

3. 使用NgStyle或NgClass