title: How to load different .css files on different components of a react application?
body: <p>I have two <code>.jsx</code> files that represent their respective components. </p>
  
  <p>The first one is, <strong>Blog.jsx</strong></p>
  
  <pre><code>import React from "react";
  import '../assets/css/blog.css';
  
  export const Blog = () =&gt; (
      &lt;div&gt;
          &lt;h1&gt;Hello Blog&lt;/h1&gt;
      &lt;/div&gt;
  )
  </code></pre>
  
  <p>With its respective CSS file, <strong>blog.css</strong></p>
  
  <pre><code>div { background: #ff481f; }
  </code></pre>
  
  <p>and the second one is, <strong>Landing.jsx</strong></p>
  
  <pre><code>import React from "react";
  import '../assets/css/landing.css'
  
  export const Landing = () =&gt; (
      &lt;div&gt;
          &lt;h1&gt;Hello Landing&lt;/h1&gt;
      &lt;/div&gt;
  )
  </code></pre>
  
  <p>With its respective CSS file, <strong>landing.css</strong></p>
  
  <pre><code>div { background: #86ff2b; }
  </code></pre>
  
  <p>I have added routing and called instances of those two components on the <strong>App.js</strong> file which is the default file of a React application. After running the application, when navigated to components, I faced a problem that the background color is the same for both of the components (It loads <strong>landing.css</strong> only and never changes).</p>
  
  <p>How can I fix that problem that each component only uses its respective .css file and loads it?</p>