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

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

問題:

Angular アプリケーションでは、親コンポーネントには複数の子コンポーネントが含まれています。目標は、親コンポーネントの CSS ファイルを使用して子コンポーネントのスタイルを設定することです。ただし、コンポーネントが分離されているため、親コンポーネントで定義されたスタイルは子コンポーネントに適用されません。

解決策:

更新: 非推奨の機能

ピアス CSS コンビネータは Angular では非推奨になりました4.3.0以降。可能であれば、このメソッドの使用は避けてください。

最新のアプローチ:::ng-deep Operator

親コンポーネントの CSS ファイルから子コンポーネントのスタイルを設定するには、::ng -ディープ演算子。この演算子により、スタイルがカプセル化の境界を突き抜けて子コンポーネントに影響を与えることができます。

:host {
  color: red;
}

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

古いアプローチ: CSS コンビネータを貫通する

::ng- の導入前>>>、/deep/、::shadow などの深く鋭い CSS コンビネータを使用できます。ただし、この機能は現在非推奨となっているため、使用しないでください。

例:

:host {
  color: red;
}

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

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