如何在 Angular 2 中完全着色 mat-card-header 背景？

Question

我已经在 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 的东西：

Answer 1

将padding:0放在垫卡上。 并且要更正填充，请在 mat-content 上添加边距。 使用特定的类名称来设计卡片的样式：

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

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

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

演示

---

旧答案：

---

我建议四个选项。

1. 使用::ng-deep 。

使用 /deep/ shadow-piercing 后代组合器将样式强制向下穿过子组件树进入所有子组件视图。 /deep/ 组合器适用于嵌套组件的任何深度，它适用于组件的视图子项和内容子项。 仅在模拟视图封装中使用 /deep/、>>> 和 ::ng-deep。 Emulated 是默认的也是最常用的视图封装。 有关更多信息，请参阅控制视图封装部分。 不推荐使用阴影穿透后代组合器，并且正在从主要浏览器和工具中删除支持。 因此，我们计划放弃对 Angular 的支持（对于 /deep/、>>> 和 ::ng-deep 中的所有 3 个）。 在那之前 ::ng-deep 应该是首选，因为它与工具更广泛地兼容。

CSS：

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

演示

---

2. 使用视图封装

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

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

打字稿：

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

CSS

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

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

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

演示

---

3.在style.css中设置样式

样式文件

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

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

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

演示

---

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>

演示

Answer 2

我会尝试添加

position: absolute; top: 0; 

到您指定背景颜色的标题样式标签。 md-card 组件具有整个卡片的默认填充值，因此您必须绝对定位标题以忽略该填充值。 但是，如果您这样做，可能会导致其他卡片元素的其他位置发生变化。 如果你打算经常使用这种风格，我会制作你自己的版本。 这是源， https://github.com/angular/material2/tree/master/src/lib/card

Answer 3

/deep/ 组合器将在 Angular 中弃用，因此最好不要使用它。

不幸的是，Angular Material 是高度指定的，这使得在不使用 /deep/ 的情况下很难覆盖

我发现的最好方法是使用 ID，与默认的 Angular Material 样式相比，它允许您具有更高的特异性。

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

然后，'my-card' id 可用于在 global.scss 文件中定位此卡。 在不破坏您的视图封装的情况下无法从 component.scss 中定位它，这可能是您不想做的事情。

好消息是，id 为“my-card”的所有内容现在都可以轻松定位，包括很难以任何其他方式定位的材质动画。

如果您有菜单、按钮等，它们都可以使用 .scss 进行样式设置，而无需使用important!

global.scss

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

我希望 Angular Material 团队在未来收回他们的特殊性，因为目前没有简单的方法来覆盖他们的默认值。