在开发中发现了修改elementUI样式的时候,添加了scoped的组件无法修改的样式
首先我们要了解一下vue scoped是什么,很多人非常喜欢用scoped,其实scoped也没有很神秘的,它就是基于PostCss的,加了一个作用局的概念。
//编译前
<style scoped>
.example {
color: red;
}
//编译后
.example[_v-f3f3eg9] {
color: red;
}
现在我们来说说怎么覆盖element-ui样式。由于element-ui的样式我们是在全局引入的,所以你想在某个view里面覆盖它的样式就不能加scoped,但你又想只覆盖这个页面的element样式
方法一:style中不加scoped,可写一个通用样式全局使用
方法二:可在它的父级加一个class,以用命名空间来解决问题。
.aritle-page{ //你的命名空间
.el-tag { //element-ui 元素
margin-right: 0px;
}
}
方法三:深度选择器 (推荐)
某些预处理器(如Sass)可能无法>>>正确解析。在这些情况下,您可以使用组合/deep/或::v-deep组合 - 两者都是别名,>>>并且工作完全相同。
<style scoped>
.a >>> .b { /* ... */ }
</style>
以上将编译成:
.a[data-v-f3f3eg9] .b { /* ... */ }
参考官网:https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors
网友评论