Question

此mat-card-header-text操纵标题文本的填充值。我有两张不同的卡，我想为其应用不同的边距。（默认边距：0 16px）

 ::ng-deep .mat-card-header-text {
    margin: 0 !important;
}

这是我如何操作它们的方法。但是，它已被应用到所有方法。如何针对不同的卡进行操作？我想为其中一些卡设置默认margin:0 16px;，为其他卡元素设置0px不幸的是，如果不使用此类名称，它将不适用

Answer 1

向mat-card-header组件添加一些自定义类，并将该类与mat-card-header-text组合

component.html

<mat-card-header class="header">
    <div mat-card-avatar class="example-header-image"></div>
    <mat-card-title>Shiba Inu</mat-card-title>
    <mat-card-subtitle>Dog Breed</mat-card-subtitle>
  </mat-card-header>

component.css

::ng-deep .header .mat-card-header-text {
    margin: 0 !important;
}

Answer 2

将您的Angular材质选择器包装到某个类的任何其他div元素中。那么您只能在该特定div中设置样式。

div .mat-card-header-text  {}

如何为不同的mat-card元素操纵mat-card-header-text类？

2 个答案: