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.