How to pass styles to child component and use it as scoped style in Vue?

Question

I have a parent component:

<template>
    <ChildComponent :styles="styles" />
</template>

<script>
export default {
    data: () => ({
        styles: `
            p {
                color: red
            }
        `
    })
}
</script>

And this is the child component:

<template>
    <p>Hello World</p>
</template>

<script>
export default {
    props: {
        styles: {
            type: String,
            required: true
        }
    }
}
</script>

<style scoped>

</style>

Now I want to use those styles provided by the parent component in child as scoped styles. Like for example:

<!-- ChildComponent.vue -->

<style scoped>
p {
    color: red
}
</style>

Is there any way to do so?

Solution 1

If you want to target the child elements with scoped styling you have to use the deep selector.

Which can be done with

a >>> b { color : red; }
/deep/ a b { color : red; }
a::v-deep b { color : red; }

Here is the full explanation: https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements

Solution 2

If you wanna add the style in your child component, based on the parent component which is calling it, you can pass an attribute as a prop and use it as a class into the child component. Following your example:

Parent component:

<template>
    <ChildComponent styles="parent-style" />
</template>

Child component:

<template>
  <section :class="styles">
    <p>Hello World</p>
  </section>
</template>

<script>
export default {
    props: {
        styles: {
            type: String,
            required: true
        }
    }
}
</script>

<style lang="scss" scoped>
  .parent-style {
    p {
      color: red;
    }
  }

</style>

Comments

[Max Svidlo]

you can pass down your style as a prop afterwards just get the style object and use it on your template. <div v-bind:style="{...styles }"></div> more info can be found here: vuejs.org/v2/guide/class-and-style.html

[Connor Leech]

/deep/ works too bambielli.com/til/…

[dreijntjens]

It should be /deep/ instead of \deep\ I corrected the post

[Jamie Marshall]

This only works in a situation where you have access to the child source. I think the far more likely scenario is you need to pass a scoped style to a child whose source you have no access to.

[Douglas Gaskell]

I just get expected selector compilation error when using /deep/

[Art3mix]

Adding to Jamie, another case is where you have a wrapper where every child will use the same style, so you want to apply the style once on the wrapper (parent) instead of every child, stuff like: titles, text designs, buttons, etc.

[Renan Coelho]

I never knew this >>> operator before. It worked! Thanks!