title: How can I dynamically change the value of a CSS property in React?
body: <p>I have a class based component and <code>this.props.opacity</code> which define the opacity of a background and I have a class with the background with an opacity of 0 by default, I would like to change the opacity based on <code>this.props.opacity</code> which returns a number</p>
  
  <p>For example:</p>
  
  <pre><code>this.props.opacity // is at 0 but it also changes when I'm on the page 
  
  &lt;div className={backgroundRed ? "background" : ""}&gt; // is the JSX
  
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>.background {
    background: red;
    opacity: 1; // How do I make this value change based on this.props.opacity
  }
  </code></pre>
  
  <p>FYI <code>this.props.opacity</code> has values from 0 to 1 and it looks like this: <code>0.073892020</code></p>
  
  <p>How can I dynamically change that by accessing the opacity value of my CSS class?</p>