title: React JS How to make components unaffected by CSS?
body: <pre><code>import React, { Component } from "react";
  import './navbar.css'
  
  
  class NavBar extends Component {
  
  
  
  
    render() {
      return (
        &lt;div&gt;
  
            navbar stuff
  
  
  
        &lt;/div&gt;
  
  
      );
    }
  }
  
  export default NavBar;
  </code></pre>
  
  <p>If I were to import NavBar to another file and place it. </p>
  
  <pre><code>import React, { Component } from "react";
  import NavBar from './NavBar'
  import './randomfile.css'
  
  
  class somefile extends Component {
  
    render() {
      return (
        &lt;div id="test"&gt;
  
            &lt;NavBar /&gt;
  
  
        &lt;/div&gt;
  
  
      );
    }
  }
  
  export default somefile;
  </code></pre>
  
  <p>How do I prevent the CSS to affect my navbar? I'm trying to work with components but I've fallen into a bunch of CSS on my components when I just want the CSS i have in my NavBar file</p>
  
  <p>randomfile.css</p>
  
  <pre><code>#test div {
      text-align: left;
  }
  </code></pre>
  
  <p>^ Makes everything under div align to the left</p>