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

98 阅读 0 评论 65 点赞

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

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

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

复制代码

1
2
3
4
5
6
7
8
<style>
/* 全局样式 */
</style>

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

复制代码

1
2
3
4
<style scoped>
.a >>> .b { /* ... */ }
</style>

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

复制代码

1
2
3
4
<style lang="scss" scoped>
.a { /deep/ .b { } }
</style>

知识总结

当<style>有scoped标签时，

复制代码

1
2
3
4
<style scoped>
.upload{...}
</style>

会转换为

复制代码

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

复制代码

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

添加了scoped的组件其中：

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

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。