CSS-Module und React-Komponenten, ich habe das Gefühl, CSS-Module nicht korrekt zu verwenden und meine Stile kollidieren

Question

Also habe ich eine Suchfeldkomponente, die in der Navigationsleiste auf allen Seiten der Website verwendet werden soll. Ich mag auch daher diese Komponente/html in anderen Seiten der Website verwenden ich es unter

LocationSearchBox.js gezeigt in einer Komponente setzen

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 (
     <FormGroup> 
      <FormControl type="text" placeholder="Search" /> 
      <Button bsStyle="success" type="submit" className={styles.navbarSubmitButton}>Get Weather</Button> 
     </FormGroup> 
    ) 
} 

Ich verwende CSS Module mit Web-Pack meiner SCSS zu konvertieren in css und generieren zufällige Stile für die Verwendung in Klassennamen für die Komponenten.

LocationSearchBox.scss

.navbarSubmitButton { 
    margin-left: 20px; 
} 

Die in der Komponente fügt nur etwas Platz zwischen dem Eingang und Submit-Button.

Dies ist die NavBar-Komponente wieder mit Hilfe von React-Bootstrap.

MainNavBar.js

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(
     <Navbar fixedTop className={styles.navbarColour} > 
      <NavbarBrand pullLeft > 
      <a href='#' className={styles.Brand}>Weather-app</a> 
      </NavbarBrand> 
      <Navbar.Collapse> 
      <Navbar.Form pullRight> 
       <Search/> 
      </Navbar.Form> 
      </Navbar.Collapse> 
     </Navbar> 
    ) 

} 

Jetzt habe ich eine Homepage Komponente erstellt und ich möchte im Inneren der LocationSearchBox Komponente verwenden.

Home.js

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

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

Die Suchkomponente innerhalb Home.js, hat die Taste die gleiche margin-left Eigenschaft die Navigationsleiste war, so dass es auf der rechten Seite etwas bewegt wird. Ich möchte nicht, dass das passiert. Ich möchte, dass es nur auf das Suchfeld angewendet wird, das in der Navigationsleiste verwendet wird, aber ich bin nicht sicher, wie das mit CSS-Modulen und React-Komponenten funktioniert, ohne ein separates Suchfeld für die Navigationsleiste zu erstellen, aber ich sehe das als sinnlos habe genau den gleichen Code.

Ich habe das Gefühl, dass ich CSS-Module überhaupt nicht richtig verwende, ich benutze seine Philosophie und den Sinn von CSS-Modulen nicht richtig.

Answer 1

Es ist schwer zu sagen, was der beste Ansatz wäre, ohne zu verstehen, warum es an diesen Standorten visuell anders sein muss, aber im Allgemeinen würde ich <Search /> aktualisieren, um eine neue Stütze zu akzeptieren, um die zusätzliche Marge bedingt anzuwenden.

Es theme sein könnte, wenn diese beiden Arten sind wahrscheinlich viele Male verwendet werden:

<FormControl type="text" placeholder="Search" /> 
<Button bsStyle="success" type="submit" className={props.theme === 'foo' ? styles.navbarSubmitButton : null}>Get Weather</Button> 

Oder wenn es eher eine Überschreibung ist könnten Sie eine buttonClassName Stütze bieten außergewöhnliche Arten an bestimmten Anruf-Websites:

<FormControl type="text" placeholder="Search" /> 
<Button bsStyle="success" type="submit" className={`${styles.navbarSubmitButton} ${props.buttonClassName}`}>Get Weather</Button>