CSS Angular2 材料上的卡片标题背景颜色

Card header background color on Angular2 materials

提问by user3127996

I thought that it would be simple, but I'm struggling to set the background color of a card header within Angular2 materials and I'm not finding any examples. Therefore, given the following code, I would appreciate tips on how to go about setting the background color of md-card-title:

我认为这很简单，但我正在努力在 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>

回答by Faisal

Just add [style.backgroundColor]="'COLOR_YOU_WANT'"in your <md-card-header>selector:

只需添加[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>

Link to working demo.

链接到工作演示。

Alternatively, add a class in your css file:

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

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

and set the [ngClass]in your <md-card-header>selector:

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

or another alternative is to use [ngStyle]:

或另一种选择是使用[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>

回答by Vega

Either of these would help to set the header background:

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

1. Use ::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;
   }
   

1. 用 ::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

演示

1. Use encapsulation: ViewEncapsulation.Noneon components decorator an

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

2. 使用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

演示

回答by Commercial Suicide

Angular Material uses palettes, so there are two ways:

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

1. Overwrite theme colors right in the current palette (or create your own palette)
2. Use !importantflag to override default colors (if this doesn't work without the flag, and in many cases it doesn't), like this: md-card-title { background-color: green !important; }(in some cases you will need ::ng-deepas well to get access to those elements)

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

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

1. Use NgStyleor NgClass

3. 使用NgStyle或NgClass

回答by Alireza Ahmadi

you can set padding 0 to mat-card and set a padding to card inner element (mat-card-header, mat-card-content) :

您可以将填充 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>

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