title: Changing the CSS for a React component has effect on all other pages
body: <p>I have a React component with the following files:</p>
  <ul>
  <li>src/components/HomePage/index.js</li>
  <li>src/components/HomePage/style.scss</li>
  </ul>
  <p>The component is very simple:</p>
  <pre><code>import React from 'react';
  import './style.scss';
  
  const HomePage = () =&gt; {
      return (
          &lt;div className=&quot;homepage&quot;&gt;
              &lt;h1&gt;Landing page&lt;/h1&gt;
          &lt;/div&gt;
      );
  };
  
  export default HomePage;
  </code></pre>
  <p>Within <code>style.scss</code> I am applying a style to all <code>&lt;h1&gt;</code> tags:</p>
  <pre><code>h1 {
      color: #f3f3f3;
      font-family: &quot;Cambria&quot;;
      font-weight: normal;
      font-size: 2rem;
  }
  </code></pre>
  <p>And it works as expected. However, I now see that the h1 style within <code>styles.scss</code> is being applied to every h1 on my site, even on pages that do not use this component.</p>
  <p>I am using Gatsby, but it's a React app at heart. My understanding is that React's code-splitting feature would take care of this, that the code from <code>style.scss</code> would only be included in bundles for any page that uses my component.</p>
  <p><strong>It's the <em>why</em> that I am asking about</strong>. I have two easy fixes:</p>
  <ul>
  <li>Wrap everything in <code>style.scss</code> in a <code>.homepage</code> wrapper</li>
  <li>Use CSS modules and rename the file to <code>style.module.scss</code>. When I see people do that they always do `import style from './style.module.scss' - is there a way to have CSS modules without assigning it to an object like that?</li>
  </ul>
  <hr />
  <p><strong>Update</strong>: Coming back to this question after spending a lot of time with React and I think there's a gap in the market for React styling. CSS modules is syntactically poor in my opinion and having to manually wrap everything in a <code>.home</code> tag to localise it is manual work I don't want to do. Someone should really create a React plugin that automatically does this so that whenever I have a file called <code>Home.js</code> and I import <code>Home.css</code> that all the CSS is automatically restricted to <code>Home.js</code> without me having to do anything special.</p>