Override Angular Material style in Angular component

Question

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:

Answer 1

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.