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

Question

I have a parent component:

Answer 1

You can directly set your styles prop to inline style v-bind:style instead of scoped style. Hope it will work.

<template>     
<p v-bind:style="styles">Hello World</p>
</template>

Answer 2

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