Tengo un proyecto Nuxt.js (así que sigo usando Vue 2) con estos dos componentes, me gustaría anular el estilo secundario del padre, descubrí el ::v-deep pero no parece estar funcionando .

Mi etiqueta siempre aparece como azul cornflowerblue en lugar de orange .

¿Alguien ha experimentado esto antes?

PD: Después de que funcione, me gustaría importar algunos estilos como (color primario: '#fff') desde la función de configuración de la API de composición y pasarlos a mi etiqueta de estilo (para permitir la personalización de estilos desde un JSON expediente). He visto que se pueden usar algunos métodos ( este , por ejemplo, o este ). ¿Hay un mejor enfoque para ello?

Padre

 <template> <div> <Label class="ui-label" /> </div> </template> <script lang="ts"> import { defineComponent } from '@nuxtjs/composition-api' export default defineComponent({ name: 'ParentComponent', }) </script> <style lang="scss" scoped> .ui-label { ::v-deep { .label { color: orange; } } } </style>

Niño

 <template> <div class="label">Abc</div> </template> <script lang="ts"> import { defineComponent } from '@nuxtjs/composition-api' export default defineComponent({ name: 'Label', }) </script> <style lang="scss" scoped> .label { color: cornflowerblue; } </style>