如何阻止背景样式从覆盖背景颜色风格的内联风格

Question

为什么 background在react Inline风格中覆盖backgroundColor？

在此示例中，未设置绿色背景色，因此包括透明度在透明部分中的背景梯度逐渐淡出而不是绿色。

如何阻止这种情况发生以使透明度有用？

class App extends React.Component {
  render() {
    return (
      <div style={{backgroundColor:"green", background: "radial-gradient(100% 100% at 0px 0px, rgb(230, 100, 101), transparent)"}}>
      </div>
    );
  }
}
// Render it
ReactDOM.render(
  <App />,
  document.getElementById("react")
);

div {
  width: 200px;
  height: 200px;
}

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

如果我只是在外部设置CSS，则可以使用它，但是我需要以React内联样式起作用，因为CSS将是动态的。

Answer 1

当您使用针对同一属性的多个CSS规则时，最后一个赢得了所有以前的属性。这就是为什么径向梯度是唯一可见的规则。幸运的是，可以使用多个CSS背景，因此您不能仅通过链接所有背景定义来组合不同的背景，如下所示：

background: background1, background2, ..., backgroundn

您的示例修改为具有两个背景，在下面的摘要中显示：

class App extends React.Component {
  render() {
    return (
      <div style={{background: "radial-gradient(100% 100% at 0px 0px, rgb(230, 100, 101), transparent), green"}}>
      </div>
    );
  }
}
// Render it
ReactDOM.render(
  <App />,
  document.getElementById("react")
);

div {
  width: 200px;
  height: 200px;
}

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 2

在您在background中梯度之后指定green属性，然后完全摆脱backgroundColor：

class App extends React.Component {
  render() {
    return (
      <div style={{background: "radial-gradient(100% 100% at 0px 0px, rgb(230, 100, 101), green)"}}>
      </div>
    );
  }
}
// Render it
ReactDOM.render(
  <App />,
  document.getElementById("react")
);

div {
  width: 200px;
  height: 200px;
}

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>