elementui 修改初始样式

在开发过程中，我们不免的会用到开源的组件框架，例如ElementUI,但是当我想要去修改部分样式去实现咱们自己的需求时会发现修改不了，原因是vue为了不影响各个 .vue 文件的样式，在<style> 定义了一个 scoped 属性，用于标记局部css。

所以，我们知道这个属性之后可以针对这个属性来修改css,

第一种方法，最为直接暴力的就是直接删除 scoped 属性

<style scoped>
 ...
</style>

// 变成

<style>
  ...
</style>

但是这样的做法极有可能感染其他页面的css样式，不建议使用！

 

第二种方法  使用 “ >>> ”    --- 深度选择器

深度选择器的使用 : 根节点 >>> 需要修改样式的class名 （如下图）

注意： Sass可能无法编译 深度选择器 可以使用 /deep/ 或者 ::v-deep

// 此处用 elementUI 中 Steps组件为例
<template>
<div>
    <el-steps :active="active" finish-status="success">
        <el-step title="步骤一"></el-step>
        <el-step title="步骤二"></el-step>
        <el-step title="步骤三"></el-step>
    </el-steps>
</div>
</template>

<script>
export default{
    data() {
        return {
            active:0
        }
    }
}
</script>
//css 样式
<style scoped>
  .steps >>> .el-step__title{
    font-size: 12px !important;
    font-weight: 600 !important;
  }
</style>
// lang="scss"
<style lang="scss" scoped>
/*deep*/
.steps{
/deep/ .el-step__title{
    font-size: 12px !important;
    font-weight: 600 !important;
  }
}
.steps{
v-deep .el-step__title{
    font-size: 12px !important;
    font-weight: 600 !important;
  }
}

</style>

 

还有修改失败的小伙伴可以试试这个写法：

.steps{
&::v-deep .el-step__title{
    font-size: 12px !important;
    font-weight: 600 !important;
  }
}

欢迎关注我的公众号：码上学习鸭