Appliquer les styles du parent dans angular2
Supposons que j'ai un composant avec ce modèle:
<div class="frame">
<span class="user-defined-text">{{text}}</span>
</div>
<style>
span { font-size: 3em; }
.frame { ... }
</style>
Comment puis-je fusionner les styles appliqués à un composant, par exemple
<custom-component [text]="'Some text'">
<style>custom-component { font-weight: bold; }</style>
de sorte que le résultat final "texte" est à la fois audacieux et 3em taille?
Même mieux serait un moyen d'obtenir le calcul des styles pour l'élément hôte, de sorte que, par exemple, je pourrais appliquer le background-color
appliquée à l'ordinateur hôte à l' border-color
de quelques éléments dans mon template.
source d'informationauteur Soumya | 2016-01-29
Vous devez vous connecter pour publier un commentaire.
encapsulation: ViewEncapsulation.None
pour permettre à des styles de l'extérieur pour être appliquée.styleUrl
pour ajouter un fichier CSS en combinaison avec l'hôte sélecteur depour appliquer des styles en fonction de la classe ajoutée à l'élément.
Je sais que c'est vieux, mais je crois que ce doit être plus visible. Vous pouvez utiliser le
/deep/
sélecteur à la force d'un style à travers le composant enfant de l'arbre dans tous les composant enfant vues. Le/deep/
sélecteur fonctionne à une profondeur de composants imbriqués, et il s'applique à la fois à la vue des enfants et des enfants de contenu du composant.J'ai l'impression que c'est beaucoup plus propre et plus facile à mettre en œuvre.
parent.css
https://angular.io/docs/ts/latest/guide/component-styles.html
Concernant les CSS, les composants de soutien shadow DOM. Cela signifie que leurs styles sont isolés. Le mode par défaut est isolé. Si vous avez besoin de définir des styles CSS dans le composant (styles de propriété).
Vous pouvez également modifier le mode d'encapsulation de
ViewEncapsulation.None
. De cette façon, vous êtes composant sera en mesure de voir les styles du composant parent:Espère que cela vous aide,
Thierry
Utilisation :accueil pseudo-sélecteur de classe pour le style la toute
<custom-component>
.On ne peut pas écrire un style d'élément personnalisé, en utilisant la classe.
Exemple
À cette fin, on peut utiliser :accueil sélecteur de style comme indiqué ci-dessous
Dans la coutume-composant.scss
Vous pouvez en lire plus sur le style de la :accueil élément sur Angular4 Officiel de docs