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

::ng-deep を使用した Angular 4 の子コンポーネントのスタイリング

親コンポーネントから子コンポーネントへの CSS プロパティの上書きは、角張った。 Angular 4 では、::ng-deep セレクターを利用してこれを実現できます。

::ng-deep、以前は /deep/ として知られ、その後 >>>は、スタイルが子コンポーネント内にカプセル化されている場合でも、スタイルをネストされた要素にカスケードダウンできるようにするシャドウ貫通コンビネータです。これは、外部コンポーネントまたはライブラリ内の要素の外観をカスタマイズする場合に特に便利です。

使用法

::ng-deep を使用するには、CSS セレクターの先頭に付けるだけです。子コンポーネントの要素に適用する必要があります。例:

.parent {
  ::ng-deep .child-element {
    color: red;
  }
}

互換性

::ng-deep は Internet Explorer 11 (IE11) ではサポートされていないことに注意してください。これは、IE11 がシャドウ ピアシング コンビネータをサポートしていないためです。このため、IE11 で子コンポーネントのスタイルを設定するには、View Encapsulation フラグを使用するか、目的のスタイルを公開する Angular モジュールを作成するなど、別の方法を使用することをお勧めします。

Example

次の HTML について考えてみましょう:

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

次の CSS:

<code class="css">.container {
  ::ng-deep {
    .child-element {
      color: blue;
    }
  }
}</code>

この CSS は、クラス内の子要素を持つすべての要素に青色を適用します。アプリの子コンポーネント。

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