Override Angular Material style in Angular component

12
votes

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

6
angularangular-material2
:host /deep/ md-input-container .mat-input-wrapper { . . . } - Dylan
@Dylan Thanks, that works. Could you please post it as an answer so that I can accept it? - nullDev

6 Answers

19
votes

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

3
votes

If you are using SCSS try ::ng-deep 

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

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.

1
votes

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 😉

1
votes

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.

-1
votes

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)