I am currently working on a Nuxt.js project (still using Vue 2) that consists of two components. I am trying to override the child style with the parent's style, but the ::v-deep pseudo selector doesn't seem to be effective.
Regardless of my efforts, the label keeps displaying in cornflowerblue instead of orange.
Has anyone encountered this issue before?
PS: Once I resolve this, I plan to import styles such as primaryColor: '#fff' from the setup function of the composition API and apply them to my style tag for customizable styles via a JSON file. There are various methods like this one or that one. Is there a more efficient approach?
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>