如何在 Angular 2 中获得全彩色的垫卡标题背景？

我在 Angular 2 中制作了一个联系表。我会制作一个彩色顶栏

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

这就是我得到的：

我想要类似黄色矩形但使用 md-card-header 的东西：

Put padding:0在垫卡上。为了平衡内容上的空间，请在 mat-content 上添加边距。
使用特定的类名称来设计卡片的样式：

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

 .mat-card{
  padding:0 ;
}

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

Demo https://stackblitz.com/edit/angular-ycjkbj-xepjyk?file=app/card-overview-example.css

旧答案：

我会建议四种选择。

1. 使用::ng-深 https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep.

使用 /deep/ 阴影穿透后代组合器强制使用样式 向下遍历子组件树进入所有子组件 意见。 /deep/ 组合器适用于任何深度的嵌套组件， 它适用于视图子级和内容子级 成分。 仅将 /deep/、>>> 和 ::ng-deep 与模拟视图封装一起使用。 模拟是默认且最常用的视图封装。为了 更多信息，请参阅控制视图封装部分。这 不推荐使用阴影穿透后代组合器，并且支持 已从主要浏览器和工具中删除。因此我们计划放弃 支持 Angular（对于 /deep/、>>> 和 ::ng-deep 的所有 3 个）。直到 那么应该首选 ::ng-deep 以获得更广泛的兼容性 工具。

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 https://stackblitz.com/edit/angular-ycjkbj-8nr3v3

2. 使用视图封装 https://angular.io/guide/component-styles#view-encapsulation

...组件CSS样式被封装到组件的视图中并且 不影响应用程序的其余部分。 为了控制每个组件的封装方式， 您可以在组件元数据中设置视图封装模式。 从以下模式中选择： .... None 表示 Angular 不进行视图封装。 Angular 添加了 CSS 到全局样式。范围规则、隔离和 前面讨论的保护措施不适用。这本质上是 与将组件的样式粘贴到 HTML 中相同。

None 值是您从组件设置材质样式所需的值。角材用途mat-select-content作为选择列表的类名称。 所以可以在组件的选择器上设置：

打字稿：

  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 https://stackblitz.com/edit/angular-ycjkbj

3.在style.css中设置样式

样式.css

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

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

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

DEMO http://stackblitz.com/edit/angular-ycjkbj-qjht6c

4.使用内联样式

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 https://stackblitz.com/edit/angular-ycjkbj-mmfgwz