JavaScript

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>

Answer

The syntax you were actually trying to use is related to Vue3 >> ::v-deep (.label)

In Nuxt as of today, you would need to write ::v-deep .label

Really useful link: https://stackoverflow.com/a/55368933/8816585

Vue 2 and NuxtJS – style child component from parent

Advertisement

Answer