Override Angular Material style in Angular component

nullDev_6621 0
Viewed 25838

I am using Material 2 <md-input-container> in my Angular component. I want to override one of the classes e.g. .mat-input-wrapper defined in Angular Material. But I want to override only in that component and the override should not effect other components in the page.

Here is the screenshot of the rendered element:Rendered md-input-container

angular-material2 angular
6 Answers

If you are using SCSS try ::ng-deep 

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

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

user_140975550

The problem with ::ng-deep is, it will apply the style across all the pages and all the components. Meaning its a dirty approach. A better way to do this, is to wrap with a custom class and style the element in your styles.scss/styles.css

Example: As asked in the question. To override a .mat-input-wrapper, wrap your element with your custom class like:

<md-input-container class='big-input'>. Then in

styles.scss:

.big-input .mat-input-wrapper {
   height : 200px;
}

add !important if necessary.

user_30190060

The preferred solution probably would be to define the styles in your own Material theming style sheet. The use of /deep/ is deprecated (Angular V 4.3): https://angular.io/guide/component-styles#special-selectors

You can now use ::ng-deep at as an alternative to defining your own theming style sheet.

However, using the ::ng-deep can influence the use Material icons negatively again when using it to override a default font family (as Material Icons is a font-family as well)

user_58944230
Related