Comment styliser les composants enfants dans Vue.js en utilisant /deep/, >>>, ::v-deep et :deep ?

>>, ::v-deep et :deep ? " />

Comment utiliser /deep/, >>> ou ::v-deep dans Vue.js

Lorsque vous travaillez avec des structures de composants dans Vue.js, l'application de règles de style aux éléments des composants enfants devient nécessaire. Ici, Vue propose plusieurs options pour y parvenir : /deep/, >>>, et ::v-deep.

Vue 2.0 - 2.6

Sass : Utiliser ::v-deep pour pénétrer les limites des composants enfants :

::v-deep .child-class {
    background-color: #000;
}

CSS simple : Employer >>> pour obtenir le même effet :

>>> .child-class {
    background-color: #000;
}

Vue 3 (et Vue 2.7)

Sélecteur unifié : Vue 3 introduit :deep comme sélecteur unifié, quel que soit Sass utilisation :

:deep(.child-class) {
    background-color: #000;
}

Contenu de l'emplacement : Éléments de style transmis via les emplacements :

:slotted(.slot-class) {
    background-color: #000;
}

Styles globaux : Application de styles globalement à partir de composants étendus :

:global(.my-class) {
    background-color: #000;
}

Clé Considérations :

• Tous les styles doivent être définis dans les balises