angular2-mdlのデフォルトCSSを上書きするにはどうすればよいですか？

Question

私はAngular2アプリケーションでうまく進歩しています。MDLのscssファイルの使用方法を明確にしてくれてありがとう（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のデフォルトスタイルをオーバーライドする適切な方法は何ですか？グローバルなスタイルに上書きしたいものすべてを置く必要がありますか？

ありがとうございました！

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