Card header background color on Angular2 materials

user_3127996 0
Viewed 32352

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: 

<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-material2 angular-material angular
4 Answers

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

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

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

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

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

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

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

DEMO

  1. Use encapsulation: ViewEncapsulation.None on components decorator an

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

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

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

DEMO

user_54684630

Angular Material uses palettes, so there are two ways:

  1. Overwrite theme colors right in the current palette (or create your own palette)
  2. Use !important flag 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-deep as well to get access to those elements)
::ng-deep md-card-title {
  background-color: green !important;
}
  1. Use NgStyle or NgClass
user_60536540

you can set padding 0 to mat-card and set a padding to card inner element (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>

user_63051000
Related