CSS Modules and React components, I feel like I am not using CSS modules correctly and my styles are clashing
<p>So I have a search box component that is to be used in the Navigation bar on all pages of the site. I also want to use this component/html in other pages of the site hence I put it inside a component shown below</p>

<p>LocationSearchBox.js</p>

<pre><code>import React, {PropTypes} from 'react'
import {Button,FormGroup, FormControl} from 'react-bootstrap'
import styles from '../scss/components/LocationSearchBox.scss'

export default function LocationSearchBox(props) {
    return (
        &lt;FormGroup&gt;
            &lt;FormControl type="text" placeholder="Search"  /&gt;
            &lt;Button bsStyle="success" type="submit" className={styles.navbarSubmitButton}&gt;Get Weather&lt;/Button&gt;
        &lt;/FormGroup&gt;
    )
}
</code></pre>

<p>I am using css modules with web pack to convert my scss into css and than generate random styles to use in classnames for the components. </p>

<p>LocationSearchBox.scss</p>

<pre><code>.navbarSubmitButton {
  margin-left: 20px;
}
</code></pre>

<p>This used inside the component just adds some space between the input and submit button.</p>

<p>This is the NavBar component again with the help of react-bootstrap.</p>

<p>MainNavBar.js</p>

<pre><code>import React from 'react';
import {Navbar, NavbarHeader, NavbarBrand, NavbarCollapse} from 'react-bootstrap';
import {default as Search} from './LocationSearchBox'
import styles from '../scss/components/MainNavbar.scss'

export default function MainNavbar() {
   return(
       &lt;Navbar fixedTop className={styles.navbarColour} &gt;
          &lt;NavbarBrand pullLeft  &gt;
             &lt;a href='#' className={styles.Brand}&gt;Weather-app&lt;/a&gt;
          &lt;/NavbarBrand&gt;
          &lt;Navbar.Collapse&gt;
             &lt;Navbar.Form pullRight&gt;
                &lt;Search/&gt;
             &lt;/Navbar.Form&gt;
          &lt;/Navbar.Collapse&gt;
       &lt;/Navbar&gt;
   )

}
</code></pre>

<p>Now I have created a homepage component and I want to use the LocationSearchBox component inside it. </p>

<p>Home.js</p>

<pre><code>import React from 'react'
import {default as Search} from '../components/LocationSearchBox'
import styles from '../scss/components/Home.scss'

export default function Home() {
   return (
       &lt;div className={styles.center}&gt;
          &lt;h2&gt;Enter a city and state&lt;/h2&gt;
          &lt;Search /&gt;
       &lt;/div&gt;
   )
}
</code></pre>

<p>The search component inside Home.js, the button has the same margin-left property was the navigation bar so it is moved to the right a bit. I don't want that to happen. I want it only to be applied to the search box used inside the navigation bar but I am unsure of how to do that with CSS modules and React components without creating a separate search box for the navigation bar but I see that as pointless when it will have the exact same code.</p>

<p>I feel like I am not using CSS modules correctly at all, I am not using its philosophy and the point of CSS modules correctly.</p>