Встроенный собственный CSS в React

У меня есть простой компонент кнопки

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

и я пытаюсь применить собственный CSS, используя конический градиент:

const wellStyle = {
  background: "conic-gradient(lime 40%, yellow 0 70%, red 0) !important"
}

Когда я включаю это в свою таблицу стилей напрямую, он отлично работает:

.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;
}

Но это не работает, когда я включаю его как встроенный стиль в свой компонент. Мне интересно, почему мой компонент демонстрирует такое поведение и как изменить встроенный стиль с помощью реакции?