Comment puis-je styliser les composants enfants dans Angular 4 en utilisant ::ng-deep ?

Styler les composants enfants dans Angular 4 avec ::ng-deep

L'écrasement des propriétés CSS des composants parent vers les composants enfants peut être une tâche courante dans Angulaire. Dans Angular 4, vous pouvez exploiter le sélecteur ::ng-deep pour y parvenir.

::ng-deep, anciennement connu sous le nom de /deep/ et plus tard >>> , est un combinateur perçant les ombres qui permet aux styles de se répercuter sur les éléments imbriqués, même s'ils sont encapsulés dans des composants enfants. Ceci est particulièrement utile lors de la personnalisation de l'apparence des éléments au sein de composants ou de bibliothèques externes.

Utilisation

Pour utiliser ::ng-deep, préfixez-le simplement au sélecteur CSS vous souhaitez appliquer aux éléments du composant enfant. Par exemple :

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

Compatibilité

Il est important de noter que ::ng-deep n'est pas pris en charge dans Internet Explorer 11 (IE11). En effet, IE11 ne prend pas en charge les combinateurs de perforation d'ombre. Pour cette raison, il est recommandé d'utiliser des méthodes alternatives pour styliser les composants enfants dans IE11, telles que l'utilisation de l'indicateur View Encapsulation ou la création d'un module Angular qui expose les styles souhaités.

Exemple

Considérez le HTML suivant :

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

Et le CSS suivant :

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

Ce CSS appliquera la couleur bleue à tous les éléments avec l'élément enfant de classe dans le composant-enfant-application.

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!