::ng-deep を使用して、Angular 4 で子コンポーネントの CSS プロパティをオーバーライドするにはどうすればよいですか?

Angular 4 で ::ng-deep を使用して子コンポーネント CSS プロパティを上書きする

Angular 4 では、::ng-deep セレクターを使用して親コンポーネントの CSS 内から子コンポーネントの CSS プロパティをオーバーライドできます。これは、子コンポーネントの Shadow DOM 境界を貫通することによって実現されます。

使用法:

::ng-deep を使用するには、CSS セレクターの先頭に追加するだけです。次のように子コンポーネントの要素をターゲットにします:

<code class="css">::ng-deep .child-component {
  /* CSS properties to override */
}</code>

例:

次の HTML 構造を考えてみましょう:

<code class="html"><parent-component>
  <child-component class="child"></child-component>
</parent-component></code>

To override子コンポーネント内の p 要素のスタイルについては、親コンポーネントで次の CSS を使用できます:

<code class="css">::ng-deep .child p {
  color: red;
}</code>

IE11 サポート:

::ng -deep は Internet Explorer 11 ではサポートされていません。IE11 をサポートする必要がある場合は、代わりに代替の :host-context() セレクターを使用する必要があります。ただし、:host-context() には独自の制限があり、すべてのケースに適しているわけではありません。

以上が::ng-deep を使用して、Angular 4 で子コンポーネントの CSS プロパティをオーバーライドするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。