how to pass style css from parent component to child component vue

Question

My Parent:

<template>
   <div> 
     <p class="my-class">Hello world.</p>
     <Child/>
 </div>
<template>

import Child from "@/components/Child.vue";

<style scoped>
  .my-class{
    font-size: 18px;
  }
</style>

What'd be the child vue? to load scoped style CSS in my Child.Vue component.

Answer 1

You can use the deep selector in scoped css block to apply the class to the component's children components. See the docs

In your case the css portion of the SFC would turn to something along the lines of:

<style scoped>
::v-deep(.my-class) {
  font-size: 18px;
}
</style>