title: How to make React CSS import component-scoped?
body: <p>I have several components which have the following CSS/component structure</p>
  
  <p><code>About/style.css</code></p>
  
  <pre><code>.AboutContainer {
      # Some style
  }
  
  p &gt; code {
      # Some style
  }
  </code></pre>
  
  <p>And I import the CSS in the componet as follows</p>
  
  <p><code>About/index.js</code></p>
  
  <pre><code>import './style.css';
  
  export default class About extends Component {
      render() {
           # Return some component
      }
  }
  </code></pre>
  
  <p>However, the CSS is imported in the <code>&lt;header&gt;</code> section and stays global-scope.</p>
  
  <p>I was expecting CSS to be:</p>
  
  <ol>
  <li>Component-scoped in a way that the style is only applied to things that are <strong>only</strong> rendered within this component.</li>
  <li>Style for this component would disappear if the component is unmounted.</li>
  </ol>
  
  <p>However, when inspecting from the browser, the styles are specified at the <code>&lt;header&gt;</code> section and gets applied to all the components</p>
  
  <pre><code>&lt;header&gt;
     // Stuff
     &lt;style type="text/css"&gt;style for component About&lt;/style&gt;
     &lt;style type="text/css"&gt;style for component B&lt;/style&gt;
     &lt;style type="text/css"&gt;style for component C&lt;/style&gt;
     // Stuff
  &lt;/header&gt;
  </code></pre>
  
  <p>How do I import CSS to be component-scoped? It seems like I'm understanding CSS import in React ES6 incorrectly.</p>
  
  <p>I was following <a href="https://medium.com/@patriciolpezjuri/using-create-react-app-with-react-router-express-js-8fa658bf892d" rel="noreferrer">this tutorial</a></p>
  
  <hr>
  
  <p><strong>Edit</strong></p>
  
  <p>Answer by Brett is correct. However, my problem turns out to be somewhere else. I created my app using <a href="https://github.com/facebookincubator/create-react-app" rel="noreferrer">create-react-app</a> which basically simplifies setups required to do React. It include WebPack, Babel and other things to get started. The default WebPack config that it uses did not set <a href="https://github.com/webpack-contrib/css-loader/blob/master/README.md#modules" rel="noreferrer">module option</a> for the <code>css-loader</code> so it defaulted to <code>false</code>, and as a result the local-scoping was not enabled. </p>
  
  <p>Just for additional info, it seems like create-react-app does not have straightforward way to customize WebPack config, but there seem to be numerous how-to workarounds on the web.</p>