How do I override angular2-mdl's default CSS?

Question

I'm making good progress with my Angular2 app, thanks again for clarifying how to use the scss files from MDL (answered here ).

However, I'm having trouble now overriding certain default styles set by MDL. For example, I don't want the tabs in the tabs bar to use "justify-content: center", but rather "justify-content: flex-start", so the tabs are aligned left.

My initial approach was to try to override the property by supplying:

.mdl-tabs__tab-bar {
    justify-content: flex-start;
}

directly in the scss file of the component containing the tabs.

But this won't work as Angular2 scopes my selectors, eg like this

.mdl-tabs__tab-bar[_ngcontent-eph-22]

and so they never apply. So what's the proper way to override MDL's default styles? Do I have to put everything I want to override in the global styles.sass?

Thanks in advance for any help!

Answer 1

By default angular 2 component are set with encapsulation: ViewEncapsulation.Emulated which will append unique component attribute to component style. So that its styles can be specific to the component.

We can avoid adding the unique component attribute to the styles by setting encapsulation: ViewEncapsulation.None in component meta data.

import {ViewEncapsulation} from '@angular/core';

@Component({
  templateUrl: 'component.template.html',
  styleUrls: [`component.style.scss`],
  encapsulation: ViewEncapsulation.None
})

Now set the following in your scss file.

.mdl-tabs__tab-bar {
    justify-content: flex-start;
}

it will applied for all the occurrences of elements with mdl-tabs__tab-bar class.

Answer 2

As far as I know, you can override using the /deep/ selector (or >>> ). You have to add this css to the styles of your AppComponent .

:host /deep/ .mdl-tabs__tab-bar {
    justify-content: flex-start;
}

If you add it to the AppComponent , then where ever you add the tabs, it will have this style overridden. If you only want to override it for certain components, you add this css to that component.

read more