css - 视觉 : how to change the style of scoped child components

Question

我在vue中使用了vant ui组件，比如按钮，我想稍微改变一下它的样式，比如颜色，边框......，但我不知道如何完成它，任何人都可以帮助我解决问题？提前致谢!

我试过在元素上添加 css 或内联样式，但没有用!

Answer 1

可以使用深度选择器更改任何自定义组件的 CSS

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

在这种情况下使用 ::v-deep，因为 /deep/ 将被弃用。

引用 - Deep Selector

只需检查要使用 chrome 或任何浏览器控制台中的 devtools 修改的呈现的 element 的类。

然后，在你消费组件时，修改它

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