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

【问题标题】：How to handle color of progress bar value in JSS?如何处理 JSS 中进度条值的颜色？
【发布时间】：2019-12-09 20:49:39
【问题描述】：

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

我的组件扩展：

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

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

【问题讨论】：

使用进度条代码添加到 jss 游乐场的链接 - codesandbox.io/s/react-jss-playground-k09ye?fontsize=14
可以在styles类中编辑“color”的代码来玩转进度值的颜色-codesandbox.io/s/react-jss-playground-k09ye?fontsize=14

标签： reactjs typescript jss

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

这里解释了为什么需要重置外观。

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

【讨论】：