子コンポーネントのみをスタイルする方法は？

Question

私はいくつかの子コンポーネントを持つ親コンポーネントを含むコードを作成しています。子コンポーネントの1つで5ピクセル下にフィルタアイコンを移動しようとしています。問題は、子コンポーネントにどのようなCSSを書き込んでも、子コンポーネントには影響しないということです。私は親コンポーネントに次のコードを配置した場合は、子コンポーネント上で動作しますが、残念ながら、他のコンポーネントに影響します。

:host /deep/ svg-icon.filterIcon { 
    height: 22px !important; 
    padding-top: 5px !important; 
} 

私はスタイルにしたい子にこれと同じコードを配置した場合、何も起こりません。次のコードを使用すると、何も起こりません。

svg-icon.filterIcon { 
    height: 22px !important; 
    padding-top: 5px !important; 
} 

この1人の子供のみをスタイルするにはどうすればいいですか？

Answer 1

：

:host /deep/ app-milestones-summary svg-icon.filterIcon { 
    height: 22px !important; 
    padding-top: 5px !important; 
} 

私はまだスタイルをどのように理解していません子コンポーネントを直接、しかし私はうまく何かを見つけてうれしいです。

Answer 2

あなたの子コンポーネントでViewEncapsulationを使用してみてください：

次のように、親コンポーネントのCSS内の子コンポーネントを働い命名

import {ViewEncapsulation} from '@angular/core'; //Import this 

@Component({ 
    moduleId: id, 
    selector: 'my-child', 
    templateUrl: 'my-child.component.html', 
    styles: [` 
    .your_css_class { 
     background: red; 
     } 
    `], 
    encapsulation: ViewEncapsulation.None // put this 
}) 

class ChildComponent { 
    @Input() some_data: string; 
}