css - Angular 11の兄弟コンポーネントにない子に親コンポーネントのcssを適用します

Question

1. i) ログイン前、ii) ログイン後、2 種類のコンポーネントがあります。

2. 両方の親コンポーネントに 2 つの異なる CSS を追加したい、

3. ViewEncapsulation.Noneを使用すると、兄弟コンポーネントにも適用されます。コードの構造は次のとおりです。

    - ParentComponent1
      - ChildCompoent1.1
      - ChildCompoent1.2
    - ParentComponent2
      - ChildCompoent2.1
      - ChildCompoent2.2
   

4. ParentComponent1に CSS を追加すると、2.1 と 2.2 ではなく ChildComponent1.1 と ChildComponent1.2 にのみ適用されます。同じことがParentComponent2にも適用されます。

ViewEncapsulation.Noneを削除するか、兄弟コンポーネントではなく子コンポーネントにのみ CSS を適用する方法はありますか