css样式穿透&elment-ui中样式改变

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css样式穿透&elment-ui中样式改变相关的知识,希望对你有一定的参考价值。

参考技术A https://blog.csdn.net/weixin_41171651/article/details/121209671

vue样式穿透

参考技术A vue的style中设置scoped属性后,组件实现样式私有化。
但是该组件又使用的其他组件库时(vant,elementui,自定义等),该组件的style中的样式,优先级低,不生效,这个时候需要使用样式穿透(作用得更深)。

通过图片可以看到scoped底层是通过在 DOM节点 中添加 data-v-xxx , CSS 中通过添加 [data-v-xxx] 属性过滤,提高优先级,来实现样式的私有化。

看一个场景实例:子组件根元素颜色为 红色 ,非根元素为 蓝色 。
父子两个组件 style 都使用 scoped 属性,在不修改子组件的前提下,在父组件上修改子组件的颜色为 绿色 。

当加上样式穿透后

vue 中针对不同的样式类型( css , less , scss )有不用的样式穿透方法。

以上是关于css样式穿透&elment-ui中样式改变的主要内容,如果未能解决你的问题,请参考以下文章

CSS样式优先级及穿透

vue3单页面引入公共的css,加了scoped但无法加deep,导致样式无法穿透,如何解决?

vue样式穿透>>>

vue样式穿透>>>

三大样式穿透

[干货]关于vue3 SFC 范围内 scoped-styles 样式穿透