如何覆蓋angular2-mdl的默認CSS？

Question

我正在使用我的Angular2應用程序取得良好進展，再次感謝您澄清如何使用MDL中的scss文件（ 在此處回答）。

但是，我現在無法覆蓋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默認樣式的正確方法呢？ 我是否必須在全局styles.sass中放置我想要覆蓋的所有內容？

在此先感謝您的幫助！

Answer 1

默認情況下，使用encapsulation: ViewEncapsulation.Emulated設置angular 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/ selector（或>>> ）覆蓋。 您必須將此css添加到AppComponent的樣式中。

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

如果將其添加到AppComponent ，那么在添加選項卡的位置，它將覆蓋此樣式。 如果您只想為某些組件覆蓋它，則將此css添加到該組件。

閱讀更多