如何在 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放在垫卡上。为了平衡内容上的 space，在 mat-content 上添加边距。
使用特定的 classes 名称来设计卡片样式：

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

 .mat-card{
  padding:0 ;
}

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

Demo

旧答案：

我建议四个选项。

1.使用 ::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。使用 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 值是您需要从组件设置 material 样式的值。 Angular material 使用 mat-select-content 作为 select 列表的 class 名称。所以可以在组件的select或：

上设置

打字稿：

  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。在 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.使用内联样式

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;

到您指定背景颜色的 header 样式标签。 md-card 组件对整个卡片有一个默认的填充值，因此您必须绝对定位 header 以忽略该填充值。但如果你这样做，它可能会导致其余卡片元素的其他位置发生变化。如果你要经常使用那种风格，我会制作你自己的版本。这是来源， 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' 的所有内容，包括 material 动画，这很难通过其他方式定位。

如果您有菜单、按钮等，它们都可以使用 .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 团队在未来收回他们的特殊性，因为目前没有简单的方法来覆盖他们的默认值。

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

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

html

css

angular-material2

angular