title: How do you make it so that each page has its own CSS / body in reactJS + react-router + create-react-app?
body: <p>I'm using React and React-Router, and create-react-app so no webpack</p>
  
  <p>so I have an index.js which pretty much routes all my components and react-router is imported, and my main component is app.js, so pretty much routed in index.js like this, also im including login.js routing</p>
  
  <pre><code>&lt;Route exact={true} path="/" component={App} /&gt; 
  &lt;Route path="/Login" component={Login}/&gt;
  </code></pre>
  
  <p>Now inside app.js I have app.css imported</p>
  
  <pre><code>import '../css/app.css';
  </code></pre>
  
  <p>and Im rendering a div with a bunch of stuff in it</p>
  
  <pre><code>&lt;div&gt;
      stuff in here
  &lt;/div&gt;
  </code></pre>
  
  <p>So inside app.css, I have</p>
  
  <pre><code>body, html{
    height: 100%;
    width:100%;
    font-family: 'Raleway', sans-serif;
    background-image: url("../images/app/app_background.JPG");
    background-repeat:no-repeat;
    background-position: center;
    background-size:cover;
    margin: 0;
  }
  </code></pre>
  
  <p>So this works perfectly on the app, now when I add a similar css file for login with everything the same as app.css but with a different background-URL, that background overrides the background on app.css</p>
  
  <p>So pretty much the login.css file is overwriting all the css in the app.css file, it seems to me that both app.css and login.css are made global when I import them into a component, they are injected to the head of index.html and it overrides one another</p>
  
  <p>Can anyone share intuition on how to stop this from happening?</p>