0
<template>
<div>
    <test />
    <test1 />
    <test2 />
</div>
</template>

<style scoped>
@import '@/main.css'


</style>

I know scoped will not let parent's style leak to child components.

But if I want the import style leak to all child components, and not let it leak to global.

This style is used for all child components, but not for global styles.

The way I found is import style in every child components, but if there are too much child components, I need too import style in every child components.

Any way to do that?

deepL
  • 13
  • 1
  • 4

1 Answers1

1

This is my codesanbox example.

If you want a selector in scoped styles to be "deep", i.e. affecting child components, you can use the >>> combinator:

Parent component:

<template>
  <div class="parent">
    <test1/>
    <test2/>
  </div>
</template>
<style scoped>
.parent >>> .child {
 // ...
}
</style>

Child component:

<template>
<div class="child"></div>
</template>

The above will be compiled into:

<div class="parent" data-v-f3f3eg9>
 <div class="child"></div>
 <div class="child"></div>
</div>

.parent[data-v-f3f3eg9] .child {}

More tips on how to use deep can be found here

sugars
  • 1,473
  • 7
  • 17
  • I need import style to affect child components, but not affect global – deepL Aug 27 '20 at 05:18
  • @deepL Wait a minute, I will create a codesanbox for you – sugars Aug 27 '20 at 05:28
  • This is for custom style. But if `import style` is library, like bootstrap, is it still some way to do that? I want to use bootstrap but I only want its class affect some component. – deepL Aug 27 '20 at 13:00