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

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

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

但是因为需要修改框架内部css,所以需要深度选择器实现​​::v-deep(){}​​ 但这时因为有两个进度条却需要设置两种不同的样式,

如果直接更改样式​​(这个css是进度条右边的部分)​​就会直接更改全部进度条的样式​​(设置css为透明)​​ 想设置上面为透明,但是下方样式也更改了

​​***解決方法:***​​

2. 上方进度条隐藏



3. 给进度条设置​​class​​然后将对应的css前面加上 自定义的class名称



5. 给下方的进度条设置样式



6. 
   



7. ​​结果样式​​



8. 代码:

上方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);
  }