javascript - 如何更改 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”不适用于标题文本类 .mat-card-header-text。我怎样才能删除该类的边距。当我检查 mat-card 组件时，我可以看到那个类。

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

希望这有帮助。