element-ui steps步骤条自定义颜色

效果图：

页面代码：

<el-steps :active="active" class="stepsStyle">
          <el-step title="开始"></el-step>
          <el-step title="2"></el-step>
          <el-step title="3"></el-step>
          <el-step title="4"></el-step>
          <el-step title="结束"></el-step>
        </el-steps>

data数据：
data(){
	return{
		active:2
	}
},

css代码：

.stepsStyle{
   width: 100%;
   ::v-deep{

     .el-step__title.is-process,.el-step__title.is-wait{
       color: #fff !important;
     }
     .el-step__head.is-process,.el-step__heads.is-wait{
       .el-step__icon.is-text{//这里设置的是下一步和等待状态里的文字颜色
         color: #C0C4*** !important;
         border-color: #C0C4*** !important;
       }
     }
     .el-step__head.is-finish{
       color: orange !important;
       .el-step__icon.is-text{//这里设置的是已完成状态里的文字颜色
         color: orange !important;
         border-color: orange !important;
       }
     }
     .el-step__title.is-finish{
       color: orange !important;
     }
     .el-step__line-inner{//这里设置的是完成后过渡线条颜色
       border-color: orange !important;
     }
     .el-step__head.is-su***ess,.el-step__title.is-su***ess{//这里设置的是完成后的颜色
       color: orange !important;
     }
   }
 }