Vue：如何更改作用域子组件的样式

Posted 2023-02-23

【中文标题】Vue：如何更改作用域子组件的样式

【英文标题】：Vue: how to change the style of scoped child components

【发布时间】：2019-11-03 23:09:00

【问题描述】：

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

我尝试在元素上添加 css 或内联样式，但不起作用！

【参考方案1】：

任何自定义component's css 都可以使用deep selector 进行更改

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

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

参考 - Deep Selector

只需在 chrome 或任何浏览器控制台中使用 devtools 来检查您要修改的渲染 element 的类。

然后，在你消费component，修改它

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

</style>