Comment puis-je remplacer les propriétés CSS du composant enfant dans Angular 4 en utilisant ::ng-deep ?

Écrasement des propriétés CSS du composant enfant avec ::ng-deep dans Angular 4

Dans Angular 4, le sélecteur ::ng-deep permet vous pouvez remplacer les propriétés CSS des composants enfants à partir du CSS du composant parent. Ceci est réalisé en perçant la limite du shadow DOM des composants enfants.

Utilisation :

Pour utiliser ::ng-deep, ajoutez-le simplement au début du sélecteur CSS qui cible l'élément du composant enfant, comme ceci :

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

Exemple :

Considérez la structure HTML suivante :

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

Pour remplacer les styles des éléments p dans le composant enfant, vous pouvez utiliser le CSS suivant dans le composant parent :

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

Support IE11 :

::ng -deep n'est pas pris en charge dans Internet Explorer 11. Si vous devez prendre en charge IE11, vous devez plutôt utiliser le sélecteur :host-context() alternatif. Cependant, :host-context() a ses propres limites et peut ne pas convenir à tous les cas.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!