スタイルの書き方

React.jsでスタイルを記述するときは、HTMLと基本は同じでstyle属性を使う方法、class属性を使う方法があります。ただし、React.jsのJSX記法の中ではclassは使えず、classNameを使います。

①styleを使う方法

見慣れない括弧{{ ... }}で囲まれていますが、これはJSX記法がJavsScriptで書かれているためです。外側の括弧は「この括弧の中にJavaScriptを書く」、内側の括弧は「JavaScriptのオブジェクト」と覚えましょう。

<要素 style={{プロパティ名: "値"}}>Hello, World!</要素>

<要素 style={{プロパティ名: "値", プロパティ名: "値", ...}}>Hello, World!</要素>

<要素 style={変数}>Hello, World!</要素>

変数を当てる場合に、{変数}のように括弧が1つなのは、変数の中に{プロパティ名: "値"}といったオブジェクトが入っているためです。

<div style={{color: "red", fontSize: "16px"}}>Hello, World!</div>

下記のように、いったん変数にスタイルを格納してから書くこともできます。

const styles = {
	color: "red",
	fontSize: "16px"
};

const element = <div style={styles}>Hello, World!</div>;

注意点は、CSSのプロパティでハイフンで書かれたものは、キャメルケース(用語の意味)で書きます。

例えば「font-size」であれば「fontSize」、「background-color」であれば「backgroundColor」といった感じです。

class属性を使うときには、代わりにclassName属性を使用します。

<要素 className="クラス名1 クラス名2 ...">Hello, World!</要素>

<div className="test">Hello, World!</div>

別途、CSSを書いたファイルには、このように書いておきます。

.test{
	color: red;
	font-size: 16px;
}

外部のCSSファイルを読み込むときは、HTMLの場合はタグを使いますが、JSXの場合はimportを使って下記のように書きます。

import './hoge.css';

const element = <div className="test">Hello, World!</div>

キャメルケースとは

単語の先頭を大文字にする書き方。

アッパーキャメルケースパスカルケース	すべての単語の先頭を大文字にする CamelCase
ローワーキャメルケース	先頭の単語だけ小文字にして、それ以外の単語の先頭を大文字にする camelCase