I have a Nuxt.js project (so still using Vue 2) with these two components, I would like to override the child style from the parent, I discovered the ::v-deep pseudo selector but it doesn't seem to be working.
My label always appear as cornflowerblue instead of orange.
Anyone has experienced this before ?
PS: After I get that to work, I'd like to import some styles such as (primaryColor: '#fff') from the setup fonction of the composition API and pass them to my style tag (to allow styles customization from a JSON file). I've seen a few methods can be used (this one for instance or this one). Is there a better approach to it ?
Parent
<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>
Child
<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>