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

Posted 2023-03-06

【中文标题】如何在 Angular 2 中获得完全着色的 mat-card-header 背景？

【英文标题】：How to get mat-card-header background fully colored in Angular 2?

【发布时间】：2018-02-02 23:01:56

【问题描述】：

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

【参考方案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;

Demo

---

旧答案：

---

我建议四个选项。

1.使用::ng-deep。

使用 /deep/ 穿透阴影的后代组合器来强制样式 通过子组件树向下进入所有子组件 意见。 /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;

DEMO

---

2。使用ViewEncapsulation

... 组件的 CSS 样式被封装到组件的视图中，并且 不影响应用程序的其余部分。 为了控制这种封装如何在每个组件的基础上发生， 您可以在组件元数据中设置视图封装模式。 从以下模式中选择： …… None 意味着 Angular 没有视图封装。 Angular 添加了 CSS 到全局样式。范围规则、隔离和 前面讨论的保护措施不适用。这本质上是 与将组件的样式粘贴到 html 中一样。

无值是您从组件设置材质样式所需的值。 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;

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

【讨论】：

那个 padding: 0 节省了我的时间。非常有用的问答：）

我很高兴能帮上忙 :)

【参考方案2】：

/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 团队在未来收回他们的特殊性，因为目前没有简单的方法来覆盖他们的默认值。

【参考方案3】：

我会尝试添加

position: absolute; top: 0; 

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

【讨论】：

但是你拿走了他的'width: 100%'线。

如果你把它加回来，你所要做的就是在要更正的内容上添加一个上边距。