// 来源：https://www.nzw6.com
ElementUI Progress、elementui progress颜色
解决方案简述
ElementUI的Progress组件提供了非常方便的进度条展示功能，当需要自定义进度条的颜色时，可以通过官方提供的属性或者样式覆盖的方式来进行设置。下面将几种改变ElementUI Progress组件颜色的方法。
一、使用stroke-color属性
这是最直接的一种方式。ElementUI为Progress组件提供了stroke-color属性，可以用于指定进度条的颜色。
```html
export default {
data() {
return {
percentage: 70
}
}
}
```
二、通过自定义样式类名进行样式覆盖
如果想要更加灵活地控制进度条的颜色，比如根据不同的业务逻辑动态改变颜色，可以借助于自定义样式类名。
```html
export default {
data() {
return {
percentage: 80,
isRed: true,
isBlue: false
}
}
}
.my-progress{
/* 可以在这里添加一些公共样式 */
}
.progress-red .el-progress-bar__outer{
border-radius: 0;
}
.progress-red .el-progress-bar__inner{
background-color: red;
}
.progress-blue .el-progress-bar__outer{
border-radius: 0;
}
.progress-blue .el-progress-bar__inner{
background - color: blue;
}
/* 如果是圆环进度条 */
.progress-red .el-progress__text{
color:red;
}
.progress-blue .el-progress__text{
color:blue;
}
``
这里定义了两个布尔类型的变量和isBlue`来控制是否应用红色或者蓝色的样式，同时在样式中针对不同类型的进度条（线型和圆环）分别设置了对应的样式规则。
三、利用css变量(适用于支持css变量的浏览器)
现在许多现代浏览器都支持css变量，我们也可以利用它来设置进度条的颜色。
```html
export default {
data() {
return {
percentage: 60,
progressColor:'#ff5f5f'
}
}
}
.el-progress-bar__inner{
background-color: var(--progress-color);
}
```
以上就是关于ElementUI Progress组件改变颜色的几种方法，可以根据实际项目的需求选择合适的方式来实现。
