Vue 2 and NuxtJS - style child component from parent

Question

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>

kissu · Accepted Answer · 2021-08-04T15:04:02.713

1

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

edited Aug 04 '21 at 15:04

answered Aug 04 '21 at 14:39

kissu

40,416
14
65
133

Sorry, my answer was not up to date, I updated it with this Vue 2 syntax, but it seems something is still off. I've seen this post before too and also upvoted it! – Théo Lavaux Aug 04 '21 at 14:42
@ThéoLavaux I still stand by my initial proposition. Isn't it working? – kissu Aug 04 '21 at 14:45
@ThéoLavaux can you try to inspect the DOM with your browser devtools to see if a class is applied? Also, do you need to have `::v-deep` on several elements? Otherwise, no need to nest it IMO. – kissu Aug 04 '21 at 14:47
No the initial proposition didn't work. However, if I open up the Devtools, I see that both classes are taking effect, however, the `blue` color takes precedence over the `orange`. Because `.label[data-v-7ad15415] { color: blue }` has more specificity than `[data-v-57f67934] .label { color: orange }` ? – Théo Lavaux Aug 04 '21 at 14:55
`.label[data-v-7ad15415] { color: blue }` actually has same specificity than `[data-v-57f67934] .label { color: orange }` but as it is defined in the child it takes precedence ? – Théo Lavaux Aug 04 '21 at 15:02
Yep, the `blue` is more specific in this case I guess. You could either pass an `!important` or an inline style that will interpolate your color via a prop (to the child component). The cleanest approach would probably be to create an object in the Child, with all the possible colors that you can expect there. And thanks to a prop, make this one change depending on what's coming from the parent. Here is an approach that you can use: https://stackoverflow.com/a/67382023/8816585 – kissu Aug 04 '21 at 15:03
Yup, I'd like to avoid `!important` as much as possible! I will think about an approach based on props instead. I started just with one css property for color but I'll have more styles to add later on so I'm not sure that a switch/case is the best way solve the problem. Thanks for help though! – Théo Lavaux Aug 04 '21 at 15:13
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/235630/discussion-between-theo-lavaux-and-kissu). – Théo Lavaux Aug 04 '21 at 15:20
1

@ThéoLavaux there is also my `How I do personally handle this kind of flow` approach in the linked answer. At the end, you can organize it as you like but yeah, passing props is IMO the cleanest and most flexible solution here. You can maybe look into this approach too, not sure what it's worth. https://markus.oberlehner.net/blog/context-aware-props-in-vuejs-components/ – kissu Aug 04 '21 at 15:20

Vue 2 and NuxtJS - style child component from parent

1 Answers1