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

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

Comment implémenter deep/ ou >>> ou :deep dans Vue.js

L'accès aux éléments de composants enfants à l'aide de CSS peut être difficile dans Vue.js. Pour résoudre ce problème, Vue fournit les opérateurs /deep/, >>> et ::v-deep qui permettent aux développeurs de cibler les éléments descendants. au sein des composants enfants.

Limitations et solutions de contournement :

Malgré la disponibilité de ces opérateurs, leur utilisation peut entraîner des problèmes lorsqu'elle est combinée avec des préprocesseurs CSS comme Sass ou le post-traitement des outils comme webpack Voici comment résoudre ces limitations :

Pour Vue 2.0 -. 2.6 :

Utilisez ::v-deep avec Sass ou >>> sans Sass, comme démontré ci-dessous :

::v-deep .child-class {
  // CSS rules
}

>>> .child-class {
  // CSS rules
}

Pour Vue 3 et Vue 2.7 :

Le préfixe ::v-deep est obsolète au profit de :deep. Voici la syntaxe mise à jour :

:deep(.child-class) {
  // CSS rules
}

Considérations supplémentaires :

• La balise