0
したがって、サイトのすべてのページのナビゲーションバーで使用する検索ボックスコンポーネントがあります。また、私は私が私のSCSSを変換するウェブパックでCSSモジュールを使用していますCSSモジュールとリアクションコンポーネントを使用すると、CSSモジュールを正しく使用していないように感じられ、スタイルが矛盾しています
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>
)
}
を示す部品の内側にそれを置くので、サイトの他のページでは、このコンポーネント/ HTMLを使用したいですcssに変換し、コンポーネントのクラス名に使用するランダムなスタイルを生成する。これは、コンポーネントの内部で使用
LocationSearchBox.scss
.navbarSubmitButton {
margin-left: 20px;
}
だけ入力し、送信ボタンの間にいくつかのスペースを追加します。
これは、反応ブートストラップの助けを借りて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内部検索コンポーネント、ボタンは、それが適切なビットに移動されるように同じマージン左プロパティは、ナビゲーションバーであった有します。私はそれが起こることを望んでいません。ナビゲーションバー内で使用される検索ボックスにのみ適用したいと思っていますが、ナビゲーションバーのための別の検索ボックスを作成せずにCSSモジュールとReactコンポーネントでそれを行う方法はわかりませんが、まったく同じコードを持っている。
CSSモジュールを正しく使用していないような気がします。私はその考え方とCSSモジュールのポイントを正しく使用していません。