修改element样式问题

2019-08-07  本文已影响0人  刘其瑞

在开发中发现了修改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

上一篇下一篇

猜你喜欢

热点阅读