欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

利用 scoped 穿透修改子组件或第三方ui组件样式

程序员文章站 2022-06-07 15:13:19
...

父组件添加scoped后,将无法修改子组件或第三方ui组件(element、iview)样式,通过v-html创建的dom内容也不受作用域内的样式影响,
可用scoped穿透解决:

<style scoped>
/* style的样式穿透使用 >>> */
外层 >>> 第三方组件 {
    样式
}
.a >>> .b{
    color: red;
}

/* sass和less的样式穿透使用 /deep/ */
外层 /deep/ 第三方组件 {
    样式
}
.a /deep/ .b{
    background: #fff;
}
</style>