angular - Angular2 Material 上的卡片标题背景颜色

Question

我认为这很简单，但我正在努力设置 Angular2 Material 中卡片标题的背景颜色，而且我没有找到任何示例。因此，如果给出以下代码，我将不胜感激有关如何设置 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>

链接到 working demo .

或者，在您的 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>