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

在Element UI中，你可以通过覆盖默认的CSS样式来自定义步骤条（Steps）的颜色。以下是一个简单的例子，展示了如何为步骤条中的不同步骤设置不同的颜色：

<template>
  <el-steps :space="200" active="1" finish-status="success">
    <el-step status="process" title="已完成" icon="el-icon-check"></el-step>
    <el-step status="process" title="进行中" icon="el-icon-loading"></el-step>
    <el-step status="process" title="待进行" icon="el-icon-more"></el-step>
  </el-steps>
</template>
 
<script>
export default {
  // 你的组件数据和方法
};
</script>
 
<style scoped>
/* 为已完成的步骤设置绿色 */
.el-step__title.is-process.is-success {
  color: #67c23a;
}
 
/* 为进行中的步骤设置蓝色 */
.el-step__title.is-process {
  color: #409eff;
}
 
/* 为待进行的步骤设置灰色 */
.el-step__title:not(.is-process) {
  color: #909399;
}
</style>

在这个例子中，我们使用了.el-step__title选择器来定位步骤条中的标题，并根据每个步骤的状态（.is-process、.is-success）来应用不同的颜色。通过覆盖默认的样式，你可以自定义步骤条中的颜色以满足你的设计需求。