修改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 { /* ... */ }