Comment styliser les composants enfants à partir du CSS d'un composant parent en angulaire ?

Comment styliser les composants enfants à partir du fichier CSS d'un composant parent ?

Dans Angular, styliser les composants enfants à partir du fichier CSS d'un composant parent nécessite un moyen de percer la portée des composants. Voici comment surmonter cette limitation.

Mise à jour (Angular 4.3.0 et supérieur)

Avec la dépréciation des combinateurs CSS perçants, un nouveau, ::ng-deep, a été introduit. Il vous permet de cibler les composants enfants au plus profond de la structure DOM.

:host ::ng-deep parent {
  color: blue;
}
:host ::ng-deep child {
  color: orange;
}

Ancienne méthode (versions angulaires antérieures à 4.3.0)

Avant ::ng-deep, vous pouviez utiliser le perçage Combinateurs CSS tels que >>>, /deep/ et ::shadow pour pénétrer les limites des composants. Cependant, notez que ces combinateurs sont obsolètes et doivent être évités si possible.

:host >>> parent {
  color: blue;
}
:host >>> child {
  color: orange;
}

Approches alternatives

• Mode d'encapsulation : Par défaut, les composants sont encapsulés en utilisant le Shadow DOM, empêchant les styles de fuir en dehors du composant. Vous pouvez désactiver l'encapsulation en définissant la propriété d'encapsulation sur Aucun dans le décorateur de composant (@Component).
• styleUrls : Utilisez la propriété styleUrls dans le composant enfant pour importer des styles à partir du composant parent. Cela vous permet d'accéder à la feuille de style du composant parent dans la portée du composant enfant. Cependant, cette approche nécessite de définir manuellement les styles des composants enfants dans la feuille de style parent.

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!