如何更改 Angular 库组件中使用的垫卡样式

Question

我在 angular 库组件中使用了 mat-card，如下所示

<mat-card class="la-card">
  <mat-card-header class="la-card__header">
    <mat-card-subtitle>Field</mat-card-subtitle>
    <mat-card-title>Case title</mat-card-title>
  </mat-card-header>
  <mat-card-content class="la-card__content">
    <p>
      The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
      A small.
    </p>
  </mat-card-content>
  <mat-card-actions class='la-card__actions'>
    <button mat-button>Created</button>
    <button mat-button>Details</button>
  </mat-card-actions>

我给的样式如下

.la-card__header {
    margin: 0;
    flex-shrink: 0;

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

边距“0”不适用于页眉文本 class .mat-card-header-text。我怎样才能删除那个 classs 的边距。 class 我在检查垫卡组件时可以看到。

Answer 1

使用下面的 css 选择器来深入 angular 类 ::ng-deep.

CSS 在这种情况下重置保证金的规则是：

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

至于完整的代码片段，它将是：

.la-card__header {
  margin: 0;
  flex-shrink: 0;

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

希望对您有所帮助。

Answer 2

您可以在选择 class .mat-card-header-text 时使用深度 class 选择器。

.<your-class> {
   .<parent-class> {
     .la-card__header {
       .mat-card-header-text {
         margin: 0;
       }
     }
   }
}

在这个例子中，我们添加了一个额外的 class 选择器来击败 material CSS 选择器。

如何更改 Angular 库组件中使用的垫卡样式

How to Change the styles of mat card which is used in Angular library component

html

javascript

angular-material2

angular