如何在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上添加边距。

我建议四种选择。

<强> 1。使用::ng-deep。

  

使用/ deep / shadow-penetcing后代组合器强制样式   通过子组件树进入所有子组件   观点。 / deep / combinator适用于任何深度的嵌套组件，   它适用于视图子节点和内容子节点   零件。   使用/ deep /，＆gt;＆gt;＆gt;和:: ng-deep仅限于模拟视图封装。   模拟是默认和最常用的视图封装。对于   有关更多信息，请参阅控制视图封装部分。该   阴影穿透后代组合子已被弃用，支持是   从主要浏览器和工具中删除。因此我们打算放弃   支持Angular（对于所有3个/ deep /，＆gt;＆gt;＆gt;和:: ng-deep）。直到   那么:: 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;
}

<强> DEMO

<强> 2。使用ViewEncapsulation

  

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

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

<强> Typscript：

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

<强> DEMO

第3。在style.css中设置样式

<强>的style.css

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

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

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

<强> DEMO

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

Answer 2

我会尝试添加

position: absolute; top: 0; 

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

Answer 3

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

不幸的是，对角材料进行了高度指定，这使得不使用/ deep /

时很难覆盖它。

我发现最好的方法是使用ID，与默认的Angular Material样式相比，它可以为您提供更高的特异性。

important!

然后，'my-card'ID可用于在global.scss文件中将此卡定位为目标。在不破坏视图封装的情况下，不能从component.scss定位它，这可能是您不希望做的事情。

令人高兴的是，ID为“ my-card”的所有内容现在都可以轻松定位，包括材质动画，而这些动画很难以其他方式定位。

如果您有菜单，按钮等，它们都可以使用.scss和 使用#chart-card { .mat-card-header{ background-color:red; padding:5px; } .mat-card{ padding:0; } .mat-card-content{ padding:5px; } }

设置样式

global.scss

{{1}}

我希望Angular Material团队在将来撤回其特殊性，因为目前尚无简便方法可以覆盖其默认值。