Reactjs 如何处理JSS中进度条值的颜色？

我正在react中使用Typescript和JSS创建一个进度条组件

我的组件扩展了：

React.ProgressHTMLAttributes<Element>

这在CSS中正常工作。但是，我不知道如何在JSS中使用它

我尝试了以下方法：-

progress: {
        webkit: {
        value: {
          backgroundColor: "green"
        } }
      },

如果组件的类型传递为成功，则颜色应更改为绿色。如果组件类型作为错误传递，则颜色应更改为红色。 因此，我的JSS文件中有一个“success”包装

success: {
     /* progress::-webkit-progress-value {
        background-color: green;
      }*/

      progress: {
        webkit: {
        value: {
          backgroundColor: "green"
        } }
      },
      /*'&:progress': {
        '&:webkit.value': {
          backgroundColor: 'green'
        },
      }*/
      //color: "green",
      //progress.value.backgroundColor: ""
      //webkit.progress.value.backgroundColor: "green"
      //progress.value.color: "green"
      //HTMLProgressElement.progress.webkit.value = 
    },

当用户选择类型为绿色时调用

[`${classes!.success}`]: type === ProgressIndicatorType.Success

---

如果组件的类型传递为成功，则颜色应更改为绿色。如果组件的类型作为错误传递，则颜色应更改为红色。

在JSS中，伪元素的前缀为与

'&::-webkit-progress-value': {
    background: green;
}'

---

如果要将成功类名直接应用于progress元素，则需要以下JS：

success: {
  '-webkit-appearance'       : 'none',
  'appearance'               : 'none',
  '&::-webkit-progress-value': {
    'backgroundColor': 'green',
  },
}

下面解释了为什么需要重置外观

---

添加一个带有进度条代码的jss游乐场链接-可以在styles类中编辑“color”代码，以便使用进度值的颜色-

success: {
  '-webkit-appearance'       : 'none',
  'appearance'               : 'none',
  '&::-webkit-progress-value': {
    'backgroundColor': 'green',
  },
}