CSS 模块和 React 组件，我觉得我没有正确使用 CSS 模块并且我的样式发生冲突答案

【问题标题】：CSS Modules and React components, I feel like I am not using CSS modules correctly and my styles are clashingCSS 模块和 React 组件，我觉得我没有正确使用 CSS 模块并且我的样式发生冲突
【发布时间】：2016-08-16 07:01:27
【问题描述】：

所以我有一个搜索框组件，将在网站所有页面的导航栏中使用。我也想在网站的其他页面中使用这个组件/html，因此我把它放在下面显示的组件中

LocationSearchBox.js

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>
    )
}

我正在使用带有 web pack 的 css 模块将我的 scss 转换为 css，然后生成随机样式以在组件的类名中使用。

LocationSearchBox.scss

.navbarSubmitButton {
  margin-left: 20px;
}

这在组件内部使用只是在输入和提交按钮之间增加了一些空间。

这又是在 react-bootstrap 的帮助下的 NavBar 组件。

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>
   )

}

现在我已经创建了一个主页组件，我想在其中使用 LocationSearchBox 组件。

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>
   )
}

Home.js 中的搜索组件，按钮具有与导航栏相同的 margin-left 属性，因此它向右移动了一点。我不希望这种情况发生。我希望它只应用于导航栏中使用的搜索框，但我不确定如何在不为导航栏创建单独的搜索框的情况下使用 CSS 模块和 React 组件来做到这一点，但我认为这毫无意义有完全相同的代码。

我觉得我根本没有正确使用 CSS 模块，我没有正确使用它的理念和 CSS 模块的要点。

【问题讨论】：

标签： css reactjs css-modules

【解决方案1】：

如果不理解为什么在这些位置需要在视觉上有所不同，很难说最好的方法是什么，但通常我会更新 <Search /> 以接受一个新的道具来有条件地应用额外的边距。

如果这两种样式可能被多次使用，则可能是theme：

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

或者，如果它更像是一种覆盖，您可以提供一个 buttonClassName 属性以在特定调用站点添加特殊样式：

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

【讨论】：