Override Angular Material style in Angular component

Question

I am using Material 2 in my Angular component. I want to override one of the classes e.g. .mat-input-wrapper defined in

Answer 1

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

2. Suppose you want to override a 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