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?