One of my components is a parent:
<template>
<ChildComponent :styles="styles" />
</template>
<script>
export default {
data: () => ({
styles: `
p {
color: red
}
`
})
}
</script>
And here is the child component:
<template>
<p>Hello World</p>
</template>
<script>
export default {
props: {
styles: {
type: String,
required: true
}
}
}
</script>
<style scoped>
</style>
I am looking for a way to apply those parent-provided styles in the child component as scoped styles. For example:
<!-- ChildComponent.vue -->
<style scoped>
p {
color: red
}
</style>
Is it achievable?