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

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.