Angular 如何处理material2卡中带有mat卡头文本的div？

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

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

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

我见过其他人注意到这一点。它会在我的标题左边留下一个40px的空格。没有CSS似乎也会影响它

---

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

使用以下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卡标题>span{
背景色：#fff；
背景色：rgba（255、255、255、0.5）；
位置：绝对位置；
利润上限：-81px；
左边距：-24px；
字体大小：20px；
填充：10px；
}
{{article.title}}
{{article.description}}

---

使用

会产生一些奇怪的间距问题。不确定这是否是错误。

此行为是Angular 2/4的结果，在

模拟模式下，它只会（通过
样式
元素）注入与视图模板中的元素实际匹配的组件样式

因此，如果您尝试覆盖
.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>

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

我通过为md卡标题提供负左边距来修复它

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

这个额外的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>


你的头衔在这里
这里有东西
为mat卡容器创建一个类并添加

border-collapse:collapse;

为我创造了奇迹。
如果您想同时支持标题中有图像和没有图像的版本，这是一个可能的解决方案。其思想是切换一个类，该类在没有可用图像时固定边距（通过示例中的链接输入设置）。无论有无图像，这种卡片制作方法看起来都很好

Html:

Ts

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

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

根据他们最近的建议，这对我很有效：

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

给mat卡标题留一个负左边距，以解决问题

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

正如你所说，我试图直接使用div。然而，我最终得到了我的div和插入的div。但是，为什么要这样做呢？你的表现方式还是我最终的表现方式？@flamusiu我个人尽量避免使用额外的元素来抵消之前的CSS规则。因此，我目前使用的是
ViewEncapsulation.None
解决方案，但这也不太适合我。当我有时间的时候，我可能会使用组件继承。是的，我可能会保持现有的状态。它是如何添加一个额外的元素这样的疯狂=\我不得不添加
！重要信息
要使其正确覆盖边距：：ng deep是一个很好的技巧<代码>：：ng deep

不推荐使用！在使用：：ng deep时使用：host非常重要，否则您将创建一个全局样式！：主机：：ng deep为组件和嵌套在其中的任何HTML创建样式。他：）如果您解释此代码如何解决问题，这会有所帮助。我认为我们需要删除左侧空白，因此“证明内容”似乎无法解决问题。但是更多的解释会更好。这是针对组件的，而不是css类。为我工作。尝试了许多解决方案，但没有效果。虽然：：ng deep建议更广泛的兼容性，但angular将放弃对这些/deep/、>>>和：：ng deep的支持。在我的问题中，/deep/不起作用，但：：ng deep工作正常

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

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

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

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

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