css - Angular で ViewEncapsulation.None の効果を無効にする

Question

ViewEncapsulation.None の効果を無効にする方法は? たとえば、私のコンポーネント (firstComponent) の 1 つは、いくつかのプロパティを持つ css クラスを定義します。同じcssクラスを使用するsecondComponentがあります。「secondComponent」で、最初のコンポーネントのスタイルシートで定義されたプロパティに異なる特定の値を使用したいと考えています。どうすればこれを達成できますか？

注 : 「secondComponent」の同じクラスを異なる値で再定義し、secondComponent の viewEncapsulation をデフォルトのままにしました。それは私にはうまくいきませんでした。

FirstComponent:
@Component({
    moduleId: module.id,
    selector: "FirstComponent",
    templateUrl: 'FirstComponent.component.html',
    styleUrls: ['FirstComponent.component.css'],
    encapsulation: ViewEncapsulation.None
})
FirstComponent.component.css

.ui-tree .ui-tree-container {
    background-color: #252525;
    color: white;
}

Second Component:
@Component({
    moduleId: module.id,
    selector: "SecondComponent",
    templateUrl: 'SecondComponent.component.html',
    styleUrls: ['SecondComponent.component.css'],
})
SecondComponent.Component.css

.ui-tree .ui-tree-container {
    background-color: white;
    color: black;
}

内部で .ui-tree-container を使用する両方のコンポーネントで p-tree を作成しています。secondComponent のツリーの背景は白にする必要がありますが、他のすべての場所ではツリーの背景は黒のままにする必要があります。