Vue组件样式在有scoped的情况下如何设置第三方子组件样式

问题：使用iView Input组件时想要修改边框样式，但是直接修改.ivu-input或者给父元素添加id的方法不生效。

原因：父组件 <style> 有 scoped 属性时，会在DOM节点和css样式添加唯一的标记来保证该组件样式不会污染全局，但是只 在父组件元素添加标记，不会影响子组件，所以无法修改子组件样式。

解决方法：如果要设置子组件（例如iView）样式，有两种方法：

1. 可以在一个组件中同时使用有 scoped 和非 scoped 样式：

<style>
/* 全局样式 */
</style>

<style scoped>
/* 本地样式 */
</style>

2. 使用 >>>或者/deep/ 操作符（深度作用选择器）：

<style scoped>
.a >>> .b { /* ... */ }
</style>

   sass的预处理器无法解析>>>，可以使用/deep/：

<style lang="scss" scoped>
.a { /deep/ .b { } }
</style>

知识总结

当<style>有scoped标签时，

<style scoped>
.upload{...}
</style>

会转换为

<div data-v-91f8a770 class="upload"></div>

.upload[data-v-91f8a770]{...}

添加了scoped的组件其中：

• html每个元素添加了一个data-v-469af010标志唯一性
• 每个元素样式选择器后添加一个相同的标志
• 父组件样式不会渗透到子组件

参考：
https://vue-loader.vuejs.org/zh/guide/scoped-css.html
https://www.jianshu.com/p/b92e2a022cd8
https://www.cnblogs.com/karthuslorin/p/9038854.html

最后

以上就是优美皮皮虾为你收集整理的Vue组件样式在有scoped的情况下如何设置第三方子组件样式的全部内容，希望文章能够帮你解决Vue组件样式在有scoped的情况下如何设置第三方子组件样式所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。