react中的内联自定义CSS

我有一个简单的按钮组件

  <Button 
    bsStyle={!isClicked ? "default" : "warning"}
    className="plate-well"
    onMouseOver = {this.handleMouseDownOver}
    onMouseDown = {this.handleMouseDownOver}
    style={wellStyle}
  />

当我直接将其包含在样式表中时，效果很好：

.plate-well {
  background: conic-gradient(lime 40%, yellow 0 70%, red 0) !important;
  border: 2px solid #999;
  float: left;
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  height: 34px;
  padding: 0;
  text-align: center;
  width: 34px;
  border-radius: 100%;
  margin: 2px;
}

---

但是，当我将其作为内联样式包含在组件中时，它不起作用。我想知道为什么我的组件会表现出这种行为，以及如何通过react修改内联样式？

conic gradient

属性几乎没有在任何浏览器中完全实现（仅在Chrome 69之后）。请检查一下电话号码。我建议您使用。

您的

按钮
组件来自何处？请尝试
const wellStyle=“背景：圆锥梯度（石灰40%，黄色0 70%，红色0）！重要信息”
@Tholle按钮是一个react boostrap组件。谢谢，我已经在.css文件中包含了允许实现的polyfill。因此，在添加了js（和css）的情况下，该功能可以正常工作，但不使用内联样式。
.plate-well {
  background: conic-gradient(lime 40%, yellow 0 70%, red 0) !important;
  border: 2px solid #999;
  float: left;
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  height: 34px;
  padding: 0;
  text-align: center;
  width: 34px;
  border-radius: 100%;
  margin: 2px;
}