CODEWITHSUNDEEP
cssvue.jscomponentsstylesvantui
Eric.D
Eric.D

Reputation: 281

Vue: how to change the style of scoped child components

I use vant ui components in vue, like buttons, I want to make a litte changes of it's style, like color, border ...., but I don't how to complete it, anyone could help me solve the problem? Thanks in advance!

I have tried add css or inline-style on element, but don't work!

Upvotes: 1

Views: 2236

Answers (1)

Satyam Pathak
Satyam Pathak

Reputation: 6912

Any custom component's css can be changed by using deep selector

GitHub Reference- https://github.com/vuejs/vue-loader/issues/913

Use ::v-deep in this case, as /deep/ will get deprecated.

Reference - Deep Selector

Just inspect class of the rendered element which you want to modify using devtools in chrome or any browser console.

Then, In you consuming component, modify it

<style scoped>
::v-deep vant-component-class {
   background: red; //
}
</style>

Upvotes: 3

Related Questions