title: React CSS - how to apply CSS to specific pages only
body: <p>I am using <code>create-react-app</code> and I am trying to work out an "efficient" way to apply stylesheets to specific pages.</p>
  
  <p>My <code>src</code> folder structure looks something like this:</p>
  
  <pre><code>| pages
  | - About
  | - - index.js
  | - - styles.css
  | - Home
  | - - index.js
  | - - styles.css
  | index.js
  | index.css
  </code></pre>
  
  <p>In each of the <code>index.js</code> files I use <code>import './style.css'</code></p>
  
  <p>However, I'm finding that when I navigate from one page to the next the styles from the starting page are being applied to the target page as if they're being cached and the styles from the target page are not being followed. </p>
  
  <p>I just wondered if I'm misunderstanding how to apply styles in React to specific pages. Should I be making entirely self contained components which incude the styles too?</p>
  
  <p>I am considering applying them inline but I realise there are limitation when using JS styles.</p>