Question

我正在创建一个具有html进度条的反应组件，我正在尝试对其应用内联样式，但它没有将线性渐变应用于进度条。

以下是示例代码

const customColor = '#d3d4d5'

const element = 
   <progress 
      max="100" 
      value="85"
      style={{ color: customColor,
               background: `linear-gradient(to left, #FF0000, #FF0000)`}}>
   </progress>

ReactDOM.render(element, document.getElementById('root'));

链接到codepen： https://codepen.io/anon/pen/RMGbGe?&editors=0010

知道为什么它不会将线性渐变应用于进度条吗？

由于

Answer 1

HTML5中的<progress>元素尚不支持填充和空白区域的自定义CSS。有关一些实验性选项，请参阅the MDN docs。

来自文档的示例：

progress {
  -webkit-appearance: none;
}

::-webkit-progress-value {
  background-color: orange;
}

你可以尝试这些，但它们不适用于IE或Firefox。我建议单独的进度组件。

Answer 2

基本上您需要使用:progress-value和progress { background: customColor; } progress::-moz-progress-bar { background: linear-gradient(to left, #FF0000, #FF0000)); } progress::-webkit-progress-bar { background: customColor; } progress::-webkit-progress-value { background: linear-gradient(to left, #FF0000, #FF0000)); }。你可以尝试：

forms.reduce((result, form) => {
  result[form.RatingNumber] = result[form.RatingNumber] || []
  result[form.RatingNumber].push(form)
}
,{})

如何在反应组件中应用内联样式

2 个答案: