スタイル適用
- Reactでは全ページとしては統一感をもったスタイルを適用するとともに、コンポーネントごとにスタイルを指定することが可能
- classNameとstyle サービスを実装するにあたり、基本的なスタイルを独自に定義する。
className定義
- htmlに直接cssを適用する場合、<button class="btn btn-default"> のようにclassを指定する方法が一般的な方法
- ReactのJSXで定義する場合、classの代わりにclassNameを指定する。 <button className="btn btn-default">のように使用する。
インラインのstyle
- Reactでは、インラインのstyleは文字列として指定されません。
- 代わりオブジェクトとして指定され、キーはstyle名がキャメルケース形式にされたもので、 値はstyleの値になり、通常は文字列になります。
|
1 2 3 4 5 6 |
（例1） <button className="btn btn-default" style={{color:"gray"}}/> （例2） let buttonStyle = { color: 'red' }; <input type="button" style={buttonStyle} value="Click Me" /> |
JSX のコメント構文
{/* ... */} または {// ...} という構文でコメントアウトできる。
お問い合わせ
