require css in React component affects other components too
<p>I have the following <code>render</code> in my "main" component:</p>

<pre><code>import ComponentA from './component-a.js'; 
import ComponentB from './component-b.js'; 
const App = React.createClass({
    render: function() {
        return (
            &lt;div&gt;
                &lt;ComponentA/&gt;
                &lt;ComponentB/&gt;
            &lt;/div&gt;
        );
    }
});
</code></pre>

<p><code>ComponentA</code> requires a <code>css</code> file. So I have the following in <code>component-a.js</code>:</p>

<pre><code>require ('./component-a.css');
const ComponentA = React.createClass({
    render: function() {
        return (
            &lt;div&gt;component a&lt;/div&gt;
        );
    }
});
</code></pre>

<p>&hellip; whereas <code>ComponentB</code> doesn't. So I have the following in <code>component-b.js</code>:</p>

<pre><code>const ComponentB = React.createClass({
    render: function() {
        return (
            &lt;div&gt;component b&lt;/div&gt;
        );
    }
});
</code></pre>

<p>The <code>css</code> file required by <code>ComponentA</code> (only) is:</p>

<pre><code>div {
    width: 100px;
    height: 30px;
    border: 1px solid red;
}
</code></pre>

<p>Even though it is only <code>ComponentA</code> that requires the <code>css</code>, <code>ComponentB</code> is also affected. This is what gets rendered in the browser:</p>

<p><a href="https://i.stack.imgur.com/wpWah.png" rel="noreferrer"><img src="https://i.stack.imgur.com/wpWah.png" alt="enter image description here"></a></p>

<p>It seems that all <code>div</code> elements in the page are affected by the style required by <code>ComponentA</code>. That includes the <code>div</code> of the subsequent component <code>ComponentB</code> (which does <strong>not</strong> require the <code>css</code> style) as well as the <code>div</code> that contains <code>ComponentA</code> and <code>ComponentB</code> and yet another <code>div</code> added by React:</p>

<p><a href="https://i.stack.imgur.com/OLniv.png" rel="noreferrer"><img src="https://i.stack.imgur.com/OLniv.png" alt="enter image description here"></a></p>

<ol>
<li><p>Aren't <code>css</code> files affecting only the component that requires them? If not, and they are effectively global in effect then what exactly are the semantics of requiring a <code>css</code> file from a specific component ?</p></li>
<li><p>Other than using inline styles and placing everything in JS code, is there a way to compartmentalize CSS files so that they only affect the React component that requires them ? If one were to use class names to achieve that effect there is no guarantee that the class names would be unique when a component is used alongside other components.</p></li>
</ol>