Apprenez à utiliser le sélecteur Deep dans Vue, un outil puissant pour résoudre certains problèmes CSS.
Le CSS peut être un plaisir absolu ou votre pire cauchemar, en particulier lorsqu'il s'agit de composants qui enveloppent une série de composants enfants qui ont besoin
Dans cet article, nous allons explorer le sélecteur profond de Vue, et pourquoi il peut être un outil puissant à avoir sous votre ceinture.
Accordé, le deep n'est pas un moyen très courant de résoudre les problèmes d'injection CSS. Il y a peu de scénarios réels auxquels je peux penser qui bénéficieront de cette approche – l'un d'eux modifie le style d'un composant de bibliothèque tiers. Ou peut-être même définir des règles CSS spécifiques pour les descendants sur une base par composant, qui est celle que nous utiliserons aujourd'hui comme exemple. être attentif. Un bon nom de classe et un examen attentif de votre structure CSS sont indispensables.
Cela dit, préparons-nous.
Configuration d'un exemple
Pour mieux comprendre comment utiliser le deep sélecteur dans Vue, nous allons construire un exemple d'application très allégé qui aura des composants . Ces boutons ne seront pas stylisés d'une manière particulière, mais ils changeront en fonction du parent qui les contient.
Le premier composant, sera un simple wrapper pour un HTML . Il y a une raison à cela
Comme nous l'avons convenu, aucun style ne sera défini pour ce bouton. Sachez qu'il est toujours soumis aux sélecteurs CSS globaux qui le modifient, par exemple en définissant bouton {background-color: 'blue'; } dans vos styles globaux.
L'étape suivante consiste à créer deux parents qui utiliseront ce composant de bouton particulier. Nous allons les faire boucler avec un v-for et en rendre trois par parent, juste à titre d'exemple.
Le premier composant BlueParent ressemble à ceci. [19659017] I is blue
{{i}}
Comme vous pouvez le voir, nous importons BaseButton et le rendons à l'écran trois fois. C'est ça. ?
Le composant suivant sera RedParent et il ressemble à ceci.
Styling the Children through the Parent
Passons directement aux choses sérieuses. Ouvrez BlueParent et ajoutez le code suivant au bas du fichier:
Il se passe quelques choses notables ici. Parcourons-les étape par étape.
Tout d'abord, nous définissons un bloc
Si vous regardez à nouveau dans le navigateur, même ce nouveau recevra les styles!
Un dernier test. Allez-y et modifiez le code de style pour refléter ce qui suit:
Maintenant que le sélecteur profond a disparu, et que ce n'est qu'un simple sélecteur > les styles ne seront plus appliqués aux éléments à l'intérieur .
Maintenant , regardons .
Dans cet exemple, nous utilisons l'autre manière d'écrire un sélecteur profond . Donc >>> est identique à / deep / ! La raison d'avoir ces deux façons de le déclarer, c'est que parfois lorsque vous utilisez des précompilateurs, comme SASS, ils peuvent avoir des problèmes de compréhension >>> et ne parviendront pas à compiler votre CSS. Si cela se produit, utilisez / deep / .
Encore une fois, ajoutez ce composant à votre application, exécutez-le dans votre navigateur et vous verrez les trois boutons supplémentaires avec la couleur d'arrière-plan rouge. [19659003] Une dernière chose avant de conclure, cependant. N'oubliez pas que
Lorsque vous stylisez des composants en sélectionnant leur élément ROOT / FIRST, vous n'avez pas besoin d'utiliser le combinateur profond. Essaye le! Ajoutez le class = "buttonWrapper" à l'emballage
Revenez maintenant à l'un des composants parents et ajoutez le code CSS suivant.
div> .buttonWrapper {
couleur de fond: jaune;
}
Vous verrez que le div est correctement ciblé et son arrière-plan deviendra jaune.
Enveloppement
Le sélecteur profond n'est pas quelque chose que vous utilisez habituellement rencontrez dans la nature dans de nombreux exemples de composants Vue, car c'est une solution très spécifique à un problème très spécifique, mais cela ouvre des possibilités de réduire même la quantité d'accessoires dont vous pourriez avoir besoin dans vos composants pour injecter différents styles.
Si vous voulez le voir en action, voici un sandbox de code avec le code de l'article: https://codesandbox.io/s/deep-css-example-l1p5e .
Comme toujours, merci d'avoir lu, et faites-moi savoir sur Twitter @marinamosti si vous avez déjà rencontré un exemple sophistiqué d'utilisation du sélecteur profond !
P.S. Tous saluent l'avocat magique ?
P.P.S. ❤️??☠️
Source link