スタイルの範囲をAngular 2の子供のgrand-childに限定しますか？

Question

ここに構造があります。

<parent> 
    <child> 
     <grand-child> 
     ........ 
     </grand-child> 
    </child> 
</parent> 

私の親には、ブートストラップとすべてのカラーパレットを持つメインのグローバルCSSスタイルシートがあります。私の子供では、別のスタイルシートをViewEncapsulation.Emulatedで与えてスコープしました。しかし、私のグランド・チャイルドは、子供ではなく親のCSSをとっています。しかし、階層によれば、子供は孫の親です。お子様が親ではなく子供のスタイルをとるようにしたい場合はどうすればいいですか？

parent.css

button{ 
background: red none; 
} 

だから、すべてのボタンは、のは言わせて赤でなければなりません。

私の子供は管理コンソールです。だから全く新しいルック・アンド・フィールです。

child.css

button{ 
background: gray none; 
} 

壮大-child.component.htmlにはボタンがあります。だから私はそれが子供の中にスコープされているので、灰色になると思う。しかしそれは赤くなります。

Answer 1

私は、彼らがそうであるように、あなたのスタイルが動作するはずだと思うけど:hostは試してみる価値があるかもしれない追加：

:host button { 
    background: red none; 
} 

:host button { 
    background: gray none; 
}