Question

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

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

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

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

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

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

Answer 2

我通过向md-card-title

提供负左边距来修复它

<div class="col-sm-4 col-xs-6 thumb" v-for="(photo, index) in photos" 
    @click.prevent="$set(photo, 'checked', !photo.checked)">
  <a class="thumbnail" :class="{'active': photo.checked}">
    <img class="img-responsive" :src="photo.picture" alt="">
  </a>
</div>

Answer 3

这种行为是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 {
   ...
}

Answer 4

使用以下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>会产生一些奇怪的间距问题。不确定这是不是一个bug。

Answer 5

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

border-collapse:collapse;

为我创造了奇迹。

Answer 6

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

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

Answer 7

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

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

Answer 8

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

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

Answer 9

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

Answer 10

为mat-card-title赋予负的左边界可以解决该问题。

[test](http://google.com "hello")
[test](https://google.com "hello")
[test](google.com)
[](google.com)
[test](google.com "hello")

你如何使用material2卡中的mat-card-header-text处理div？

10 个答案: