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

Question

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

Однако сейчас у меня проблемы с переопределением определенных стилей по умолчанию, установленных 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 по умолчанию? Должен ли я поместить все, что я хочу переопределить, в глобальный style.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 к этому компоненту.

прочитайте больше