Как переопределить CSS по умолчанию angular2-mdl?

Question

Я хорошо продвигаюсь с помощью своего приложения Angular2, еще раз спасибо за разъяснение, как использовать файлы scss из MDL (ответ here).

Однако у меня возникли проблемы с переопределением определенных стилей по умолчанию, установленных в MDL. Например, я не хочу, чтобы вкладки в панели вкладок использовали «justify-content: center», а скорее «justify-content: flex-start», поэтому вкладки выравниваются влево.

Моего первоначальный подход был попытаться переопределить свойство, снабжая:

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

непосредственно в SCSS файл компоненты, содержащей вкладку.

Но это не сработает, поскольку Angular2 использует мои селекторы, например. например

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

и поэтому они никогда не применяются. Итак, каков правильный способ переопределить стили по умолчанию MDL? Должен ли я помещать все, что я хочу переопределить в глобальных стилях.sass?

Заранее благодарим за любую помощь!

Answer 1

По умолчанию угловой 2 компонент установлен с encapsulation: ViewEncapsulation.Emulated, который добавит уникальный компонентный атрибут к стилю компонента. Так что его стили могут быть специфическими для компонента.

Мы можем избежать добавления уникального атрибута компонента в стили, установив encapsulation: ViewEncapsulation.None в метаданные компонентов.

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

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

Теперь задайте в файле scss следующее.

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

будет применяться для всех вхождений элементов с mdl-tabs__tab-bar класса.

Answer 2

Насколько я знаю, вы можете переопределить с помощью селектора /deep/ (или >>>). Вы должны добавить этот css в стили вашего AppComponent.

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

Если добавить его в AppComponent, то где бы вы добавить вкладки, она будет иметь этот стиль преодолено. Если вы хотите переопределить его для определенных компонентов, вы добавляете этот css в этот компонент.

read more