How to get mat-card-header background fully colored in Angular 2?

Question

I have made a contact form in Angular 2. I would make a colored top bar

<md-card class="mdcardcontact">
  <md-card-header style="background-color: black;   width:100%">
  </md-card-header>
  <div>
    <md-card-content>
      <form [formGroup]="form" class="form">
        <div>
          <md-input-container class="full-width">
            <input mdInput type="text" formControlName="name" placeholder="Votre nom">
          </md-input-container>

        </div>
       </form>
    </md-card-content>
  </div>
</md-card>

That's what I get :

I would like something like the yellow rectangle but using md-card-header :

Answer 1

Put padding:0 on the mat-card. And to balance the space on the content, add margin on mat-content.
Use specific classes names to style the card:

.mat-card-header{
  background-color:gold ;
  padding:5px ;
}

 .mat-card{
  padding:0 ;
}

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

Demo

---

Old Answer:

I would suggest four options.

1. Using ::ng-deep.

Use the /deep/ shadow-piercing descendant combinator to force a style down through the child component tree into all the child component views. The /deep/ combinator works to any depth of nested components, and it applies to both the view children and content children of the component. Use /deep/, >>> and ::ng-deep only with emulated view encapsulation. Emulated is the default and most commonly used view encapsulation. For more information, see the Controlling view encapsulation section. The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.

CSS:

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

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

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

DEMO

---

2. Using ViewEncapsulation

... component CSS styles are encapsulated into the component's view and don't affect the rest of the application. To control how this encapsulation happens on a per component basis, you can set the view encapsulation mode in the component metadata. Choose from the following modes: .... None means that Angular does no view encapsulation. Angular adds the CSS to the global styles. The scoping rules, isolations, and protections discussed earlier don't apply. This is essentially the same as pasting the component's styles into the HTML.

None value is what you will need to set material style from your component. Angular material uses mat-select-content as class name for the select list. So can set on the component's selector:

Typscript:

  import {ViewEncapsulation } from '@angular/core';
  ....
  @Component({
        ....
        encapsulation: ViewEncapsulation.None
 })  

CSS

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

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

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

DEMO

---

3. Setting styles in style.css

style.css

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

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

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

DEMO

---

4. Using inline style

HTML

<mat-card style="padding:0">
    <mat-card-header style="background-color:red;padding:5px}">
        <mat-card-title>Title</mat-card-title>
        <mat-card-subtitle>Subtitle</mat-card-subtitle>
    </mat-card-header>
    <mat-card-content style="padding:5px !important;">
        Body text
    </mat-card-content>
</mat-card>

DEMO

Answer 2

I would try adding

position: absolute; top: 0; 

To the header style tag where you specified the background color. The md-card component has a default padding value for the whole card, so you'll have to position the header absolutely to ignore that padding value. But it might cause other position changes to the rest of the card elements if you do it like that. If you were going to use that style a lot, I would just make your own version. Here's the source, https://github.com/angular/material2/tree/master/src/lib/card

Answer 3

The /deep/ combinator is slated for deprecation in Angular, so its best to do without it.

Unfortunately, Angular Material is highly specified, which makes it very difficult to override without using /deep/

The best way I have found is to use an ID, which allows you a higher specificity compared to the default Angular Material styles.

<div id="my-card">
  <mat-card>
    <mat-card-title> Title
    </mat-card-title>
    <mat-card-content> Content </mat-card-content>
  </mat-card>
</div>

Then, the 'my-card' id can be used to target this card in the global.scss file. It can't be targeted from the component.scss without breaking your view encapsulation, which is probably something you don't want to do.

The nice thing, is that everthing within that with the id of 'my-card' can now be easily targeted, including material animations, which are hard to target any other way.

If you have menus, buttons, etc. they can all be styled using .scss and without using important!

global.scss

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

I hope the Angular Material team pulls back their specificity in the future because currently there's no easy way to override their defaults.