Je cherchais depuis longtemps une réponse définitive à cette question. Existe-t-il encore une stratégie alternative fiable et recommandée pour ce faire? Voici les réponses incorrectes à cette question:
Simplement favoriser :: ng-deep pour l'instant
et
si l'auteur du composant n'a pas intégré le style dans son API, vous n'avez pas de chance
Selon la documentation, ces 3 combinateurs sont obsolète , alors quelle est la "bonne façon" de procéder?
Les réponses suggérant d'utiliser une stratégie de style global littéralement répondent à la question et sont appréciées. Cependant, Angular est un cadre basé sur des composants et l'encapsulation de vues est l'un des principaux avantages qui en font un outil précieux. Pour être juste envers ceux qui ont répondu, cela n'a pas été précisé dans la question. Pourtant, le cas d'utilisation général et le comportement souhaité est de conserver l'encapsulation de la vue, de sorte qu'un tel changement dramatique du flux de travail n'est pas une solution raisonnable pour la majorité des cas, c'est-à-dire une "bonne voie".
4 Réponses :
Ajoutez-les à vos styles globaux.
Les problèmes que je vois avec cette approche sont: des collisions de noms potentielles entre plusieurs fournisseurs et vos propres styles., Ainsi que le fait de devoir savoir précisément quels sélecteurs identifient les éléments DOM pour éviter de déclencher des changements par inadvertance. Fondamentalement, les problèmes que l’encapsulation tente de résoudre. L'encapsulation de vues est un outil utile, nous avons juste besoin d'un moyen à l'épreuve du temps de le casser en cas de besoin, je crois.
Pas vraiment. Je veux dire que vous essayez de styliser un composant tiers. Il aura très probablement un nom de balise très spécifique. Regardez le matériel par exemple. Cela s'appliquerait évidemment à toutes les instances du composant, peu importe où il apparaît dans votre application, mais vous pouvez y remédier en créant un sélecteur encore plus spécifique: my-component third-party-component {// styles}
De cette façon, il n'appliquera les styles qu'au composant tiers qui apparaît dans le composant souhaité. Presque aussi bons que les styles encapsulés alors qu'il n'y a rien de mieux.
Avec cette approche, comment pénétrez-vous les composants encapsulés en vue pour styliser une balise spécifique à l'intérieur d'eux? L'ajout de mat-component> div.some-class à votre feuille de style globale ne fonctionnera que si vous désactivez également l'encapsulation de vue globalement, n'est-ce pas?
Cela fonctionnera si vous l'ajoutez à votre fichier styles.scss / styles.css. C'est là que vont tous les styles globaux.
Vous ne pouvez pas placer le style globalement, sauf si vous souhaitez modifier toutes les instances. Actuellement, il n’existe pas de moyen correct d’obtenir ce que vous demandez.
La documentation angulaire indique que / deep / et >>> sont obsolètes. ng-deep, est également obsolète, mais la documentation ne fournit pas un moyen d'atteindre l'objectif souhaité de corriger une instance de composant tiers dans angular. La pratique courante déduite par la documentation est d'utiliser l'opérateur obsolète ng-deep pendant que l'équipe angulaire détermine ce qu'il faut faire.
De toute évidence, l'utilisateur de ng-deep n'est pas propre, mais il n'y a pas d'alternative pour le moment.
Je suis d'accord avec Christian que le meilleur moyen est de les ajouter à vos styles globaux, puisque vous savez que ce sont des styles globaux.
Une méthode similaire consiste à utiliser encapsulation: ViewEncapsulation.None comme méta-balise sur votre composant. Tout ce que cela fait, cependant, c'est de charger paresseusement certains styles globaux, ce qui signifie qu'une fois que ce composant est créé, ces styles sont appliqués globalement sur le site, même après que le composant est "détruit".
J'ai récemment rencontré un problème similaire et j'ai fini par utiliser ViewEncapsulation.None, puis j'ai simplement écrit des sélecteurs CSS très spécifiques (par exemple #idTag> .third-party-class-1> .third-party-class-2 > .third-party-class-4 ). C'est fragile, car tout changement d'éléments par la bibliothèque tierce nuit à votre style.
Un problème est en cours sur angular qui traite de ce problème avec ViewEncapsulation.Aucun , alors j'espère qu'il y aura bientôt une résolution à ce sujet.
Plus précisément, ViewEncapsulation.None ajoute les styles à l'en-tête du document, donc oui, il s'agit essentiellement de styles globaux.
ng-deep est obsolète depuis des années, mais reste la solution incontournable que j'ai vue dans de nombreuses applications de production. Il est obsolète, mais cela ne signifie pas qu'il sera supprimé - en particulier dans ce cas particulier
En tant que tel, nous prévoyons de supprimer le support dans Angular (pour les 3 de / deep /, >>> et :: ng-deep). D'ici là, :: ng-deep doit être préféré pour une compatibilité plus large avec les outils
Remarque: veillez à inclure le sélecteur d'hôte: avant :: ng-deep. Si le combinateur :: ng-deep est utilisé sans le sélecteur de pseudo-classe: host, le style peut se retrouver dans d'autres composants
https://angular.io/guide/ component-styles # deprecated-deep - and-ng-deep
Il n'y a pas de bonne manière de rompre l'encapsulation.