Comment styliser les composants enfants dans Vue.js à l'aide des sélecteurs CSS ?

Style des composants enfants dans Vue.js avec /deep/, >>> ou ::v-deep

Dans le contexte de Vue.js , un style granulaire des composants enfants peut être obtenu à l'aide de sélecteurs CSS spécifiques. Cependant, des problèmes peuvent survenir lors de la mise en œuvre.

Vue 2.0 - 2.6

Pour pénétrer les composants enfants et sélectionner les éléments imbriqués, vous pouvez utiliser soit ::v- profond (avec Sass) ou >>> (sans Sass) dans vos règles CSS, comme suit :

Sass :

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

Autre CSS :

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

Notez que le paramètre