Angular2のコンポーネントのスタイルはカプセル化された子コンポーネントで継承されません

Question

私はcomponentAとcomponentBの2つのコンポーネントを作成しています。 componentAはcomponentBをカプセル化します。どちらも 'p'タグを持っています。私のcomponentAでは、私は@Componentデコレータ内に[p{color:red}]スタイルを書いています。 componentAのpはredに変更されますが、componentBの色は黒のままです。

私はそのバグを解決する必要があると思います。 （中または成分のブリードアウトのスタイルを防ぐ）

Answer 1

スタイルカプセル化は角度成分の主な特徴です。

あなたは

@Component({ 
    selector: 'component-b', 
    styles: [` 
    p { color: red; } 
    `] 
    ... 
    encapsulation: ViewEncapsulation.None 
}) 

またはあなたが最近導入（Angular2のみ）CSSを貫通影コンビネータ>>>

@Component({ 
    selector: 'component-b', 
    styles: [` 
    :host >>> p { color: red; } 
    `] 
    ... 
}) 

とコンポーネントの境界を横断するCSSセレクタを変更することができますしたいものを達成するためのさまざまなオプションがあります。

2番目のアプローチはデフォルトのカプセル化（ViewEncapsulation.Emulated）またはencapsulation: ViewEncapsulation.Noneで動作しますが、ここでは>>>は冗長です。 >>>とencapsulation: ViewEncapsulation.Nativeを使用することはできません。実際には、>>>（またはそれに相当する/deep/）は、シャドーDOMでは非推奨です。

ヒント：/deep/それはバグではありません>>>

Answer 2

よりSASSとのより良い動作するようです。

コンポーネントのスタイルは、通常、コンポーネントの独自のテンプレートにのみHTMLに適用されます - reference

あなたは先祖のコンポーネントに影響を与えるために親コンポーネントで定義されたスタイルをしたい場合は、私が使用使用します/deep/セレクタ（回答にGünterとして使用されているエイリアス>>>）が親コンポーネントにあり、すべての祖先コンポーネントを強制的にスタイルダウンさせます。 これは、すべてのビューの子およびコンテンツの子にスタイルを適用することに注意してください。

@Component({ 
    selector: 'component-a', 
    styles: [`/deep/ p { color: red; }`] 
}) 

Plunker

コンポーネントスタイルDEVガイドのSpecial Selectorsセクションも参照。