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

user_7670510 0
Viewed 176

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.

vuejs3 vue-component vue.js javascript
1 Answers

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>
user_124590660
Related