title: How to have separate styles for each react-tab?
body: <p>So I'm using <a href="https://github.com/reactjs/react-tabs" rel="nofollow noreferrer">react-tabs</a> for my web app which is currently comprised of three component (one tab each). I have a <code>global.css</code> which is loaded and applied to all tabs. I also have three separate CSS-files which should only be applied to each corresponding tab. Each tab/component is a separate JS-file and imports the corresponding style-sheet like so:</p>
  
  <pre><code>import '../stylesheets/Corresponding.css';
  </code></pre>
  
  <p>But since I implemented react-tabs all three style-sheets get loaded globally and therefore all get applied to each tab which I do not want.</p>
  
  <p>I tried this for each tab:</p>
  
  <pre><code>import styles from '../stylesheets/Corresponding.css';
  
  [...]
  
  render() {
  
          [...]
  
          return (
              &lt;div className="App" style={styles}&gt;
                  {content}
              &lt;/div&gt;
          );
      }
  </code></pre>
  
  <p>But they still get loaded globally. How can I make sure each style-sheet/CSS-file only applied to the corresponding tab and nothing else while keeping the structure of having one CSS-File per component?</p>