vue 修改element-ui/iview 组件默认样式

我们在使用element-ui的时候经常会需要修改组件默认样式。有的时候element提供的默认的样式不能满足项目的需要，就需要我们对标签的样式进行修改，但是发现修改的样式不起作用

我目前知道的有两种方法，推荐第二种方法：

1.在需要更改的组件里新增一个style标签【重点：不加scoped】，然后直接获取class设置样式

注意：为避免污染全局样式，最好不把它放在公共的css里面 ，给父级组件样式添加类名，如下，

  .homePage为我们要修改组件类名的父级组件样式类名。。即使定义一个空的类名也没事。

  .el-main为我们要修改组件的样式。

<style lang="scss" scoped>

</style>

<style lang="scss" >
.homePage  .el-main {
    padding: 0;
}
</style>

2.使用  /deep/，深度作用选择器，推荐！！！！

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

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

上述代码将会编译成：

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

有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 操作符取而代之——这是一个 >>> 的别名，同样可以正常工作

<style lang="scss" scoped>
.homePage /deep/ .el-main {
    padding: 0;
}
</style>

 

 

官方文档：https://vue-loader.vuejs.org/zh/guide/scoped-css.html