Sometimes, we want to pass styles to child component and use it as scoped style in Vue.js.

In this article, we’ll look at how to pass styles to child component and use it as scoped style in Vue.js.

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

To pass styles to child component and use it as scoped style in Vue.js, we can use the deep selector.

For instance, we write

a >>> b {
  color: red;
}
/deep/ a b {
  color: red;
}
a::v-deep b {
  color: red;
}

to add the deep select with >>>, /deep/ or ::v-deep.

They all select the b select in a.

Conclusion

To pass styles to child component and use it as scoped style in Vue.js, we can use the deep selector.