scoped引起的deep与>>>改变elementUI的样式

一、起因

使用到了elementUI的组件,但是其鬼样式已经提前写好了,你不能改变它的原始样式,因为它全部组件的CSS都加上了scoped属性,限制了样式的作用范围与可访问范围。所以当我们直接修改elementUI的样式的时候,通常没啥效果。

二、解决:使用deep或者>>>

1.知识储备:

首先vue的CSS属性为了不污染全局样式,所以给CSS样式表增加了scoped的属性,此属性限制了外面直接修改子组件的CSS样式,当我们使用UI组件的时候,那些组件,相对于我们自己写的组件来说,它们都是子组件,由于子组件都有scoped属性,所以我们无法直接在父组件内修改它们的样式,索性vue同样给出了解决方案:deep与>>>;

2.关于deep与>>>

官方文档的记录:

子组件的根元素:

使用 scoped 后,父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发,调整其子组件根元素的样式。

深度作用选择器:

如果你希望 scoped 样式中的一个选择器能够作用得“更深”,例如影响子组件,你可以使用 >>> 操作符:

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

上述代码将会编译成:

.a[data-v-f3f3eg9] .b { /* ... */ }

一些类似 Sass 之类的CSS语法模板预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/::v-deep 操作符取而代之——两者都是 >>> 的别名,同样可以正常工作。

总结:

(1)通常在使用vue的一些UI库时,我们一般无法更改它们的原始样式,即使它们提供的原始样式不是我们所需要的,因为它们的CSS都加上了scoped属性;

(2)由于scoped属性引起的css样式修改无效的问题,我们可以使用deep或者>>>来达到修改子组件的css样式的目的。

(3)deep与>>>作用都一样,只不过一些类似Sass之类的CSS语法模板无法解析>>>,所以有了deep。

三、demo:使用deep改变elementUI的input组件的placeholder的颜色

/deep/ input::-webkit-input-placeholder { /* WebKit browsers 适配谷歌 */
    color: yellow;
}
/deep/ input:-moz-placeholder { /* Mozilla Firefox 4 to 18 适配火狐 */
    color: yellow;
}
/deep/ input::-moz-placeholder { /* Mozilla Firefox 19+ 适配火狐 */
    color: yellow;
}
/deep/ input:-ms-input-placeholder { /* Internet Explorer 10+  适配ie*/
    color: yellow;
}

结果:

scoped引起的deep与>>>改变elementUI的样式

 

 

 

上一篇:大道至简,深度学习deep learning的形成原理和数学背景


下一篇:Vue中自动化引入样式及组件样式穿透