title: How to add scoped css in react?
body: <p>Is there a React equivalent of <code>scoped css</code> as in Vue that's <strong>super easy</strong> to work with, without a bunch of re-writes? One which I can just import an existing css file, and hook it up to a component, and it just works?</p>
  
  <p><strong>In Vue</strong>, it's as easy as</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;style scoped src="./boxes.css"&gt;&lt;/style&gt;
  </code></pre>
  
  <p>And Bam! Your css is now scoped to your component.</p>
  
  <p><strong>Is there anything similar in React</strong>? Something like
  </p>
  
  <pre><code>// import the css file
  import styles from "./boxes.css";
  
  // hook it to a component, or using any other methods
  @inject(styles)
  class Boxes extends Component {
    render(){
      &lt;div className='container'&gt;
         /* must support multiple classes out-of-the-box, unlike CSSModule where you have to 
         re-write into a super long array like className={[styles.box, styles.green, styles.large]} */
        &lt;div className='box green large'&gt;&lt;/div&gt; 
        &lt;div className='box red small'&gt;&lt;/div&gt; 
      &lt;/div&gt;
    }
  }
  </code></pre>