Categories
Vue Answers

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

Spread the love

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *