title: How to avoid CSS conflicts in ReactJs
body: <p>I am not at all an expert in react, but from what I could see if I import some css sheets these will be for all my application. If I wanted to use react for a multi-page app how do I define css sheets for each page?</p>
  <h2>My file structure</h2>
  <p><a href="https://i.stack.imgur.com/H2aLE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/H2aLE.png" alt="" /></a></p>
  <h2>Page 1</h2>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import &quot;./style.css&quot;;
  
  export default class Page1 extends Component {
    render() {
      return (
        &lt;div&gt;
          &lt;button&gt;with css&lt;/button&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  <h2>Page 2</h2>
  <pre><code>import React, { Component } from &quot;react&quot;;
  
  export default class Page2 extends Component {
    render() {
      return (
        &lt;div&gt;
          &lt;button&gt;no css&lt;/button&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  <h2>style.css</h2>
  <pre><code>button {
    background: green;
  }
  </code></pre>
  <p>This style <strong>should only be applied to the first page</strong> but it is <em>also applied to page 2</em>. How can I solve this?</p>