Pourquoi mes sélecteurs Vue.js ::v-deep, >>> et Deep ne fonctionnent-ils pas ?

>> et les sélecteurs profonds fonctionnent ? " />

Dépannage de Vue.js ::v-deep, >>> et sélecteurs profonds

Arrière-plan

Vue.js fournit des moyens de styliser les éléments dans les composants imbriqués à l'aide de sélecteurs approfondis tels que ::v-deep, >>> et :deep Cependant, des problèmes surviennent lorsque ces sélecteurs sont implémentés.

Problème

Tentative d'utilisation de ::v-deep ou >. ;>> cibler des éléments enfants à partir d'un composant Vue n'a aucun effet. Les règles de style sont transmises mot à mot au composant Vue. navigateur.

Solution

Vue 2.0 - 2.6

Sass :Utiliser ::v-deep

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

Sans Sass :Utilisation >>>

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

Assurez-vous que la balise