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

Question

I have used mat-card in angular library component like the below

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

and i gave the style like the below

 .la-card__header { margin: 0; flex-shrink: 0; .mat-card-header-text { margin: 0; } }

The margin '0' is not applying to header text class .mat-card-header-text. How can i remove the margin to that classs. That class i can see when i inspect the mat-card component.

Answer 1

Use the following css selector to reach deep angular classes ::ng-deep .

CSS rule that resets margin in this case would be:

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

And as for a full code snippet it would be:

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

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

Hope This helped.

Answer 2

You can use the deep class selector when selecting your class .mat-card-header-text .

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

In this example, we are adding an extra class selector to beat the material CSS selector.