Question

为什么React内联样式background会覆盖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，它就可以工作，但是我需要使用它来以内联样式工作，因为css是动态的。

Answer 1

当您使用针对同一属性的多个CSS规则时，最后一个将胜过所有先前的规则。这就是为什么径向渐变是唯一可见的规则。幸运的是，可以使用multiple css backgrounds，因此仅通过链接所有如下所示的背景定义就无法合并不同的背景：

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

在green中进行渐变之后，指定background属性，并完全摆脱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>

如何阻止背景样式覆盖React内联样式的backgroundColor样式？

2 个答案: