element ui 中 调用同一个组件 写两种不同的css样式 如何使两种样式都生效互不影响 el-progress

vue3 项目中需要实现一个播放控件的样式,我用的是element ui 所以打算用el-progress进度条实现, 因为上方黄色三角形需要跟着进度条移动

所以我打算用两个el-progress实现 上方进度条其他样式都隐藏只留一个黄色三角形,见下方

但是因为需要修改框架内部css,所以需要深度选择器实现::v-deep(){}
但这时因为有两个进度条却需要设置两种不同的样式,
如果直接更改样式(这个css是进度条右边的部分)就会直接更改全部进度条的样式(设置css为透明) 想设置上面为透明,但是下方样式也更改了

***解決方法:***

1. 上方进度条隐藏
   给进度条设置class然后将对应的css前面加上 自定义的class名称
2. 给下方的进度条设置样式
   
   
   结果样式
   
   代码:

上方css
  ::v-deep(.top_progress .el-progress-bar__outer) {
    background-color: transparent;
  }

  ::v-deep(.top_progress .el-progress-bar__inner) {
    background-color: transparent;
  }

下方css
  ::v-deep(.progress .el-progress-bar__outer) {
    background-color: rgba(46, 72, 117, 0.5);
  }