CODEWITHSUNDEEP
javascripthtmlangularangular-material2
Roster
Roster

Reputation: 1964

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

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.

Upvotes: 4

Views: 2801

Answers (2)

user2120978
user2120978

Reputation: 46

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.

Upvotes: 0

Mohamed Karkotly
Mohamed Karkotly

Reputation: 1517

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.

Upvotes: 2

Related Questions