How to overwrite angular-material2 styles?

Question

I'm using Angular2 with Material Design Components . And would like to overwrite some styles, but it looks like it's not possible because of ViewEncapsulation.

Is it possible to switch off ViewEncapsulation (ViewEncapsulation.None) for 3rd party components?

Answer 1

I personally wouldn't touch the actual third party source ( like changing the encapsulation ) and reason is their style might mess up.

But to handle this , I give you couple of solutions :

1-- Ugly :

You can override whatever you want from a component ( probably your top level component ) if it's viewEncapsulation is none .

So go to your app.ts and change the encapsulation to none and the do what ever you want inside that :

  inside your app.scss or css

    md-input {

       input { color:red} 

     // or whatever style you want to override , sometimes you'll need !important .
    }

2-- Better :

Material has some variables.scss file that you'll fine in their source and you can easily override their variables , like colors and stuff .

In general, you can override a global css only if the component that your doing the overriding from , it's encapsulation is none , otherwise your styles wont go outside of that component.