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

Question

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

我的组件扩展了：

React.ProgressHTMLAttributes<Element>

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

图像在 link 可用。

在CSS、

我们使用以下代码：

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

这在 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

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

Answer 1

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

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

Answer 2

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

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

此处解释了为什么需要重置外观。

https://css-tricks.com/html5-progress-element/#article-header-id-4

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

How to handle color of progress bar value in JSS?

typescript

reactjs

jss