title: How Does CSS Inheritance work in this scenario?
body: <p>I am setting up two different nav bars, one for mobile and one for desktop version, i currently have the desktop version decently done and working on the mobile version, but when i put both components in a single app.js the mobile navbar.js is reaching out and grabbing properties from my nav &lt; ul &lt; li etc. from the desktop navbar. Is there a way to only include the files that are imported into the js files. In my desktop navbar i have my desktop navbar scss and in my mobile navbar i have my mobile navbar.scss. Here is my app.js setup.</p>
  <pre><code>import React, {Component} from 'react'
  import 'bootstrap/dist/css/bootstrap.css'
  import 'bootstrap/dist/js/bootstrap.js'
  import 'util/util.js'
  
  import HomePageBody from '../components/homepage/HomePageBody.jsx'
  import Footer from '../components/footer/Footer.jsx'
  import Menubar from &quot;../components/menubar/MenuBar&quot;;
  import SideBar from '../components/sidebar/SideBar'
  
  
  class HomePage extends Component {
    componentDidMount() {
      window.scrollTo(0, 0);
  }
  
    render() {
      return (
        &lt;React.Fragment&gt;
        &lt;div style={{height: '100%'}}&gt;
          &lt;Menubar /&gt;
          &lt;SideBar /&gt;
          &lt;HomePageBody /&gt;
          &lt;Footer /&gt;
        &lt;/div&gt;
        &lt;/React.Fragment&gt;
      )
    }
  }
  
  export default HomePage
  
  </code></pre>