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

Source: https://stackoverflow.com/questions/40244860/how-do-i-override-angular2-mdls-default-css
https://scotch.io/tutorials/all-the-ways-to-add-css-to-angular-2-components

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.