Override Angular Material style in Angular component

The easiest approach I would suggest for SCSS is:

  1. You can copy the class name of property and override it in style.scss so it will work.

  2. Create a @mixin in new SCSS file and override all properties u want. then import this @mixin in style.scss. It is more cleaner approach.

EDIT: More easy and clear way to override the default css for particular component only:

  1. Open index.html and assign one unique attribute to body, as I have added override

    <body override>
 <app-root>
    <loading-screen></loading-screen>
 </app-root>
</body>

  2. Suppose you want to override a <md-input-container> css properties for Employee component which has selector app-employee.

  3. Open style.css and create override css like below.

    [override] app-employee .mat-input-container {
// add your custom CSS properties 
// this will apply only a particular component 
}

  4. Run and Enjoy 😉


If you are using SCSS try ::ng-deep 

::ng-deep { 
       .sample {
         // style
         color: green;
       }
    }

As @Dylan pointed out, you have to use /deep/ to alter the CSS within the child compoenets. Here is the answer I was looking for:

:host /deep/ md-input-container .mat-input-wrapper


There's no need to wrap with <div class="someCssClassName">. Rather, to style an Angular Material element like the title of a card..

<mat-card>
   <mat-card-title>
      {{title}}
   </mat-card-title>
</mat-card>

CSS:

mat-card mat-card-title {
   color: red;
}

Applying this to another 'child' element like <mat-card-content>

mat-card mat-card-content,
mat-card mat-card-title {
   color: red;
}

Using VS Code, hovering in the CSS editor will reveal detail of how this CSS will render. In this example, <mat-card>...<mat-card-title>

Of course, if you have multiple uses of the card in a single component, then you will need to make the distinction with a CSS class name adding the class="card-style-1" to the element itself, like <mat-card class="card-style-1".

CSS:

mat-card.card-style-1 mat-card-content,
mat-card.card-style-1 mat-card-title {
   color: red;
}

The alternative to this is to create individual components specific to the uses of different cards, styling each as required.

Tags:

Angular

Angular Material2

Recent Posts