Angularコンポーネントのスタイル
では、CSSを通して私たちのマークアップにスタイルを適用しましょう。
そのために、コンポーネントのマークアップ用のCSSスタイルが記述されるファイル
app.component.cssが役立ちます。
この際、AngularはスタイルがCSSモジュールとして機能するように自動的に処理します。
これは、すべてのセレクターがコンポーネントのマークアップに対してのみ機能し、外部のマークアップには影響を与えないことを意味します。
実際に確認してみましょう。私たちのコンポーネントに次のマークアップがあるとします:
<div>
abcde
</div>
div要素に色を設定してみましょう:
div {
color: red;
}
これにより、このスタイルが私たちのコンポーネント内のdiv要素にのみ適用され、他のいかなる要素にも適用されないことを確信できます。
テンプレートファイルに何らかのマークアップを作成してください。 そのマークアップに対するスタイルを記述してください。