::ng-deep を使用して、Angular で親からネストされたコンポーネントのスタイルを設定するにはどうすればよいですか?

Angular の ::ng-deep を使用したシャドウピアシング スタイリングの簡素化

ネストされたコンポーネントを親からスタイル設定する必要性は共通の課題です角度で。非推奨の /deep/ コンビネータがかつては解決策でしたが、現在は ::ng-deep セレクタを使用することが推奨されています。

::ng-deep の目的

::ng-deep を使用すると、コンポーネントのカプセル化を貫通して、親コンポーネントから子コンポーネントにスタイルを適用できます。この機能は、子の既存のスタイルをオーバーライドしたり補完したりする必要がある場合に特に役立ちます。

構文と例

::ng-deep の構文は次のとおりです。

<code class="css">::ng-deep {
  /* Styles to apply to child components */
}</code>

たとえば、div 要素を持つ親コンポーネントがあり、その子コンポーネント内の段落要素のスタイルを設定したい場合は、次のコードを使用できます:

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

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

この CSS は、子コンポーネントの段落要素のデフォルトの色をオーバーライドします。

IE11 互換性

::ng-deep に注意することが重要です。は Internet Explorer 11 ではサポートされていません。そのため、IE11 をターゲットにしている場合は、子コンポーネントを div でラップし、その div を代わりにスタイル設定するなど、シャドウピアシング スタイルに対する代替アプローチを検討する必要がある場合があります。

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