您如何处理 Material2 卡中带有 mat-card-header-text 的 div？答案

【问题标题】：How do you deal with div with mat-card-header-text in an material2 card?您如何处理 Material2 卡中带有 mat-card-header-text 的 div？
【发布时间】：2017-04-18 18:22:56
【问题描述】：

我似乎无法将这个容器放在 md 卡中。

在我的材料卡中，我有这个：

<div class="mat-card-header-text"> </div>

我看到其他人注意到它。它会在我的标题左侧产生 40 像素的空间。似乎也没有 CSS 会影响它。

我正在使用 Angular 4.x 和 Material2。

【问题讨论】：

标签： angular angular-material

【解决方案1】：

这个额外的 div 实际上很烦人。事实证明，您可以使用阴影穿透来对其应用样式，而无需更改 CSS 仿真模式。您可以使用 ::ng-deep 组合器来执行此操作：

::ng-deep .mat-card-header-text {
  /* CSS styles go here */
  margin: 0px; // for example to remove the margin
}

您也可以将整个标题替换为您自己的 CSS 类：

<mat-card>
  <div class="your-header">
    <div class="your-title">
      Your title here
    </div>
  </div>
  <mat-card-content>
    Stuff goes here
  </mat-card-content>
</mat-card>

【讨论】：

我必须添加 !important 才能正确覆盖边距
::ng-deep 是一个不错的提示！
::ng-deep 已弃用！
在使用 ::ng-deep 时使用 :host 很重要，否则您正在创建全局样式！ :host ::ng-deep 为你的组件和嵌套在其中的 any HTML 创建一个样式。

【解决方案2】：

根据他们最近的推荐 https://angular.io/guide/component-styles，这对我有用：

 :host /deep/ .mat-card-header-text {
     margin: 0;
 }

【讨论】：

尝试了很多解决方案，但没有效果。但是这个对我有用。
虽然建议 ::ng-deep 以实现更广泛的兼容性，但 Angular 将放弃对这些 /deep/、>>> 和 ::ng-deep 的支持。在我的问题中，/deep/ 不起作用，但 ::ng-deep 工作正常
是的，角度请使用 ``` :host ::ng-deep .mat-card-header-text { margin: 0; } ```

【解决方案3】：

我通过为 md-card-title 提供负左边距来修复它

<md-card-title style="margin-left:-8px;">

【讨论】：

嘿嘿嘿嘿嘿嘿 :)
嘿嘿嘿嘿嘿：D

【解决方案4】：

这种行为是 Angular 2/4 的 view encapsulation 的结果，在 Emulated 模式下，它只会注入（通过 style 元素）与视图模板中实际匹配的元素的组件样式。

因此，如果您尝试像这样覆盖 .mat-* 样式：

.mat-card-header-text {
  height: auto;
  margin: 0;
}

但您的 HTML 看起来像这样：

<md-card-header>
  <md-icon md-card-avatar>face</md-icon>
  <md-card-title>{{user.name}}</md-card-title>
  <md-card-subtitle>{{user.status | userStatus}}</md-card-subtitle>
</md-card-header>

那么.mat-card-header-text 规则将不会被注入到 DOM 中，因为注入器在您的模板中看不到这样的元素。

最简单的解决方法是在模板中直接包含div.mat-card-header-text 元素：

<md-card-header>
  <md-icon md-card-avatar>face</md-icon>
  <div class="mat-card-header-text">
    <md-card-title>{{user.name}}</md-card-title>
    <md-card-subtitle>{{user.status | userStatus}}</md-card-subtitle>
  </div>
</md-card-header>

编辑： 正如您所指出的，这会生成一个额外的空 div.mat-card-header-text，因此这不是一个理想的解决方案。解决这个问题的唯一方法是，如果您基于md-card（可能使用component inheritence）创建自己的卡片组件，但此时您只需直接修改组件的 CSS。

否则，您可以将组件的视图封装模式切换为None：

import { ViewEncapsulation } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'user-card',
  templateUrl: 'user-card.component.html',
  styleUrls: ['user-card.component.css'],
  encapsulation: ViewEncapsulation.None
})
...

尽管如此，:host 选择器将不再起作用，因此您需要将其替换为您在 @Component 装饰器中指定的选择器：

user-card {
   ...
}

【讨论】：

我尝试直接使用 div 如你所示。但是，我最终得到了我的 div 和插入的那个。不过，为什么要这样做呢？你展示的方式还是我最终的方式？
@flamusdiu 我个人尽量避免使用额外的元素来抵消之前的 CSS 规则。所以我目前使用ViewEncapsulation.None 解决方案，但这对我来说也不是很合适。当我有时间时，我可能最终会使用组件继承。
是的，我可以保留我当时所拥有的一切。它如何添加这样的额外元素真是太疯狂了。 =\

【解决方案5】：

给 mat-card-title 一个负的左边距解决这个问题。

.mat-card-title {
   margin-left: -16px;
 }

【讨论】：

【解决方案6】：

使用以下 css 和 html 修复它：

md-card-title > span {
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.5);
    position: absolute;
    margin-top: -81px;
    margin-left: -24px;
    font-size: 20px;
    padding: 10px;
}

<div class="main" mat-padding fxLayout="row" fxLayoutWrap="no-wrap" fxLayoutAlign="center start" fxLayoutGap="15px">
    <md-card class="mat-elevation-z2" mat-whiteframe="8" (click)="goToArticle(article)" *ngFor="let article of articleStore.articles() | async">
        <img md-card-image src="{{ article.getCover() }}">
        <md-card-title fxFlex>
            <span>{{ article.title }}</span>
        </md-card-title>
        <md-card-content>
            <p>{{ article.description }}</p>
        </md-card-content>  
    </md-card>
</div>

使用<md-card-header></md-card-header>会产生一些奇怪的间距问题。不确定这是否是一个错误。

【讨论】：

【解决方案7】：

如果您想同时支持在标题中包含图像的版本和不包含图像的版本，这是一种可能的解决方案。这个想法是在没有可用图像时切换一个固定边距的类（通过示例中的链接输入设置）。这种卡片方式无论有没有图像都很好。

HTML：

<mat-card>
  <mat-card-header [ngClass]="{'fix-margin': !link}">
    <mat-card-title>{{content}}</mat-card-title>
    <mat-card-subtitle>{{content}}</mat-card-subtitle>
    <img *ngIf="link" mat-card-avatar [src]="link">
  </mat-card-header>
  <mat-card-content>
    {{content}}
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>SHOW</button>
  </mat-card-actions>
</mat-card>

CSS

.fix-margin {
  margin: 0 -8px;
}

Ts

export class component {
  @Input() content;
  @Input() link;    
}

【讨论】：

【解决方案8】：

我知道是一个老问题，但今天仍然是一个问题。我解决的方法是在 ts 文件中像这样覆盖它：

ngAfterViewInit() {
    document.getElementsByClassName('mat-card-header-text')[0].setAttribute('style', 'margin: 0 0');
  }

【讨论】：

【解决方案9】：

mat-card-header{
  justify-content: center;
}

【讨论】：

如果您解释一下如何此代码解决问题会有所帮助。
我认为我们需要删除左侧边距的空间，因此 justify-content 似乎无法解决问题。但更多的解释会更好。
这针对的是组件，而不是 css 类。为我工作。

【解决方案10】：

为 mat-card 容器创建一个类并添加

border-collapse:collapse;

为我创造了奇迹。

【讨论】：