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.

have you tried adding class="my-class" to Child? What happens next will amaze you :p — Jaromanda X
– Jaromanda X, Commented Aug 3, 2022 at 6:12
By removing scoped from the definition of your style then the class becomes global and can be used everywhere, not just its children. — Raeisi
– Raeisi, Commented Aug 3, 2022 at 9:33

maybebot · Accepted Answer · 2022-08-03 11:48:52Z

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>

answered Aug 3, 2022 at 11:48

maybebot

1471 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related