Comment styliser des composants enfants angulaires à partir du CSS d'un composant parent ?

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

Problème :

Dans une application angulaire, un parent Le composant contient plusieurs composants enfants. L'objectif est de styliser les composants enfants à l'aide du fichier CSS du composant parent. Cependant, les styles définis dans le composant parent ne sont pas appliqués aux composants enfants en raison de l'isolement des composants.

SOLUTION :

MISE À JOUR : fonctionnalité obsolète

Les combinateurs CSS Piercing sont obsolètes dans Angular 4.3.0 et versions ultérieures. Évitez d'utiliser cette méthode si possible.

Dernière approche : ::ng-deep Operator

Pour styliser les composants enfants à partir du fichier CSS du composant parent, utilisez le ::ng -opérateur profond. Cet opérateur permet aux styles de percer les limites de l'encapsulation et d'affecter les composants enfants.

:host {
  color: red;
}

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

Ancienne approche : perforer les combinateurs CSS

Avant l'introduction de ::ng- des combinateurs CSS profonds et perçants comme >>>, /deep/ et ::shadow pourraient être utilisés. Cependant, cette fonctionnalité est désormais obsolète et doit être évitée.

Exemple :

:host {
  color: red;
}

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

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!