title: Change page background color with each route using ReactJS and React Router?
body: <p>How can I change the browsers background color when going to a new route, using ReactJS and React Router? See my EDIT's below for ideas I figured out along the way:</p>
  
  <p>I can get this working on the <code>&lt;div&gt;</code> in each page view, but I need it working on the full background so the full browser window shows the background. </p>
  
  <p>I playing with jQuery, but wondering if that's even the right way to solve this? I'm also trying to use <code>React.DOM.body</code>, but not getting it working:</p>
  
  <pre><code>  render: function() {
      return (
        &lt;div&gt;
          React.DOM.body( {style: background-color: "green"} )
          &lt;MyHeader /&gt;
            &lt;this.props.activeRouteHandler/&gt;
        &lt;/div&gt;
      );
    }
  </code></pre>
  
  <p><strong>EDIT 1:</strong> 
  I got this working, but... means I have to duplicate this CSS class for every page I want to have a different background. To use just wrap each return with: <code>&lt;div className="my-signup-bkg"&gt;</code>: </p>
  
  <pre><code>.my-signup-bkg {
      /*To support older browsers*/
      height: 100%;
      width: 100%;
  
      /* Set the height to match that of the viewport. */
      height: 100vh;
  
      /* Set the width to match that of the viewport. */
      width: 100vw;
  
      background-image: url("../images/mod-yellow-bkg.jpg");
      background-repeat: no-repeat;
      background-size: 100%; 
  }
  </code></pre>
  
  <p><strong>EDIT 2:</strong>
  Here's another way, that I like this better, it requires fewer lines of CSS and is more explicit in the ReactJS component. I set this CSS on a DIV:</p>
  
  <pre><code>.my-page-text {
      /*height: inherit;*/
      padding: 8% 5% 5% 3%;
      /*top: 55px;*/
  
      /*To support older browsers*/
      height: 100%;
      width: 100%;
  
      /* Set the height to match that of the viewport. */
      height: 100vh;
  
      /* Set the width to match that of the viewport. */
      width: 100vw;
  
      background-repeat: no-repeat;
      background-size: 100%; 
  }
  </code></pre>
  
  <p>And use this in my ReactJS component:</p>
  
  <pre><code>var MyLoginView = React.createClass({
    render: function() {
      var style = { backgroundImage: 'url("static/images/mod-yellow-bkg.jpg")' };
  
      return (
        &lt;div className="my-page-text" style={style}&gt;
            Do something.
        &lt;/div&gt;
      );
    }
  });
  </code></pre>