Warum funktionieren meine Vue.js ::v-deep-, >>>- und Deep-Selektoren nicht?

>> und Deep Selectors funktionieren? " />

Fehlerbehebung bei Vue.js ::v-deep, >>> und Deep Selectors

Hintergrund

Vue.js Bietet Möglichkeiten, Elemente in verschachtelten Komponenten mithilfe von Tiefenselektoren wie ::v-deep, >>> und :deep zu formatieren. Bei der Implementierung dieser Selektoren treten jedoch Probleme auf.

Problem

Versuch, ::v-deep oder >>> zu verwenden, um untergeordnete Elemente von innen anzusprechen Eine Vue-Komponente hat keine Auswirkung. Die Stilregeln werden wörtlich an die übergeben Browser.

Lösung

Vue 2.0 - 2.6

Sass:Verwenden Sie ::v-deep

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

Ohne Sass:Verwendung >>>

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

Stellen Sie sicher, dass das