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

Question

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

我的组件扩展了:

React.ProgressHTMLAttributes<Element>

我能够创建进度条组件。但是，我无法处理 JSS 中的值颜色。

图片可在链接中找到。

在 CSS 中，

我们使用以下代码:

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

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

我尝试了以下方法:-

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

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

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

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

Answer 1

在 JSS 中，伪元素以 & 号为前缀。

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