所以我有一个搜索框组件,将在网站所有页面的导航栏中使用。我还想在网站的其他页面中使用此组件/html,因此我将其放在如下所示的组件中
位置搜索框.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,然后生成随机样式以用于组件的类名。
位置搜索框.scss
.navbarSubmitButton {
margin-left: 20px;
}
这在组件内部使用只是在输入和提交按钮之间添加了一些空间。
这又是在 react-bootstrap 的帮助下的 NavBar 组件。
主导航栏.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 组件。
首页.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 模块的要点。
最佳答案
如果不理解为什么在这些位置需要在视觉上有所不同,很难说最好的方法是什么,但通常我会更新 <Search />
接受新 Prop 以有条件地应用额外 margin 。
可能是theme
如果这两种样式可能会被多次使用:
<FormControl type="text" placeholder="Search" />
<Button bsStyle="success" type="submit" className={props.theme === 'foo' ? styles.navbarSubmitButton : null}>Get Weather</Button>
或者如果它更像是一个覆盖,你可以提供一个 buttonClassName
prop 在特定调用站点添加特殊样式:
<FormControl type="text" placeholder="Search" />
<Button bsStyle="success" type="submit" className={`${styles.navbarSubmitButton} ${props.buttonClassName}`}>Get Weather</Button>
关于CSS 模块和 React 组件,我觉得我没有正确使用 CSS 模块并且我的样式冲突,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38850778/