Angular2で再利用可能なコンポーネントのスタイルをオーバーライドする方法は？

Question

私は再利用可能なコンポーネント "two-column-layout-wrapper"を持っています。スタイルはメインファイル.cssにあります。私は別のモジュールでこのコンポーネントを使いたいですが、私は2つのクラスの異なる幅が必要です。スタイルを上書きするにはどうしたらいいですか？

import { Component } from '@angular/core'; 
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; 
import { Response } from '@angular/http'; 


@Component({ 
selector: 'italik-managepackages', 
styles: [` 
    :host { 
     display: flex; 
    } 
`], 
template: ` 
    <div two-column-layout-wrapper> 
     <div sidebar-component italik-managepackages-overview></div> 
    </div> 
` 
}) 
export class ManagePackagesComponent { 

} 

Answer 1

あなたにはいくつかのオプションがあります。

最初に、親からクラス/スタイルを取得し、内部要素を変更する必要がある場合は、親要素CSSの/deep/セレクタを使用できます。

また、CSSを子コンポーネントに保持する場合は、属性に応じて独自のクラスを設定することで、子がそれに応じて反応するように親から子に属性を渡すことができます渡された）@Inputデコレータを使用します。詳細な説明here。

Answer 2

そうですか？

@Component({ 
    template: ` 
    <h1>Parent/h1> 
    <child [style.color]="'blue'"></test-cmp> 
    ` 
}) 
export class ParentComponent { 
} 

@Component({ 
    selector: 'child', 
    template: ` 
    <h1>Child text should be blue</h1> 
    `, 
    styles: [` 
    :host{color: red; } 
    ` 
}) 
export class ChildComponent { 
}