CODEWITHSUNDEEP
javascriptcssreactjs
George
George

Reputation: 2422

How to stop background style from overriding backgroundColor style of React inline-style?

Why does background override backgroundColor in React inline-style ?

In this example, the green background-color is not set, and so the background gradient which includes transparency fades into white, rather than green, in the transparent parts.

How can I stop this from happening so the transparency is useful?

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>

It works if I just set the css externally, but I need this to work in the react inline style because the css will be dynamic.

Upvotes: 0

Views: 742

Answers (2)

Piotr Wicijowski
Piotr Wicijowski

Reputation: 2115

When you use multiple css rules targeting the same property, the last one wins overriding all previous ones. That is why the radial gradient was the only rule visible. Fortunately, it is possible to use multiple css backgrounds, so you cant combine different backgrounds by just chaining all background definitions like shown below:

background: background1, background2, ..., backgroundn

Your example, modified to have both backgrounds, is shown in the snippet below:

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>

Upvotes: 1

dmanexe
dmanexe

Reputation: 1044

Specify the green attribute after your gradient in background, and get rid of backgroundColor completely:

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>

Upvotes: 1

Related Questions