Angular で親コンポーネントの CSS から子コンポーネントのスタイルを設定するにはどうすればよいですか?

親コンポーネントの CSS ファイルから子コンポーネントをスタイル設定する方法

Angular では、親コンポーネントの CSS ファイルから子コンポーネントをスタイル設定するには、コンポーネントのスコープを貫通する方法が必要です。この制限を克服する方法は次のとおりです。

アップデート (Angular 4.3.0 以降)

貫通 CSS コンビネータの非推奨に伴い、新しい ::ng-deep が導入されました。これにより、DOM 構造の奥深くにある子コンポーネントをターゲットにすることができます。

:host ::ng-deep parent {
  color: blue;
}
:host ::ng-deep child {
  color: orange;
}

古い方法 (4.3.0 より前の Angular バージョン)

::ng-deep より前は、ピアスを使用できました。 >>>、/deep/、::shadow などの CSS コンビネータを使用してコンポーネントの境界を貫通します。ただし、これらのコンビネータは非推奨であるため、可能であれば使用しないようにしてください。

:host >>> parent {
  color: blue;
}
:host >>> child {
  color: orange;
}

代替アプローチ

• カプセル化モード: デフォルトでは、コンポーネントはカプセル化されます。 Shadow DOM を使用して、スタイルがコンポーネントの外に漏れるのを防ぎます。コンポーネント デコレータ (@Component) で encapsulation プロパティを None に設定すると、カプセル化を無効にできます。
• styleUrls: 親コンポーネントからスタイルをインポートするには、子コンポーネントの styleUrls プロパティを使用します。これにより、子コンポーネントのスコープ内で親コンポーネントのスタイルシートにアクセスできるようになります。ただし、この方法では、親のスタイルシートで子コンポーネントのスタイルを手動で定義する必要があります。

以上がAngular で親コンポーネントの CSS から子コンポーネントのスタイルを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。