Comment puis-je styliser les composants imbriqués de leur parent dans Angular en utilisant ::ng-deep ?

Simplifier le style Shadow-Piercing avec ::ng-deep dans Angular

La nécessité de styliser les composants imbriqués à partir de leur parent est un défi courant en angulaire. Alors que le combinateur /deep/ obsolète était autrefois une solution, il est désormais recommandé d'utiliser le sélecteur ::ng-deep.

Objectif de ::ng-deep

::ng-deep vous permet de percer l'encapsulation des composants et d'appliquer des styles aux composants enfants du parent. Cette fonctionnalité est particulièrement utile lorsque vous devez remplacer ou compléter les styles existants de l'enfant.

Syntaxe et exemple

La syntaxe de ::ng-deep est la suivante :

<code class="css">::ng-deep {
  /* Styles to apply to child components */
}</code>

Par exemple, si vous avez un composant parent avec un élément div et que vous souhaitez styliser les éléments de paragraphe au sein de son composant enfant, vous pouvez utiliser le code suivant :

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

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

Ce CSS remplacera la couleur par défaut des éléments de paragraphe dans le composant enfant.

Compatibilité IE11

Il est important de noter que ::ng-deep n'est pas pris en charge par Internet Explorer 11. Par conséquent, si vous ciblez IE11, vous devrez peut-être explorer des approches alternatives pour le style perçant les ombres, comme encapsuler le composant enfant dans un div et styliser ce div à la place.

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!