【React】style属性にCSSを記述してスタイリングを行う方法

Reactで要素のstyle属性にCSSを記述する

style属性でのCSSの基本的な書き方

Reactで要素のstyle属性にCSSを記述する場合、JavaScriptのオブジェクトの形式で記述します。

また、CSSのプロパティ名はキャメルケースで記述するようにしましょう。

< 通常のHTMLでstyle属性にCSSを記述する場合 >

<p style="color: red; font-size: 16px;">
  テキストテキストテキスト
</p>

< Reactでstyle属性にCSSを記述する場合 >

~ 省略 ~
return (
  <p style={{ color: "red", fontSize: "16px"; }}>
    テキストテキストテキスト
  </p>
);
~ 省略 ~

数字以外の値を「””」で囲わなくてないけないあたり、JavaScriptのオブジェクトであることを感じられると思います。

三項演算子で分岐を行う

Reactのreturn内では、三項演算子を使うことで条件分岐処理を記述することができます。

【React】JSXで条件分岐を記述する方法をまとめてみた

ReactのJSX内で条件分岐を記述するとき、if文を使うとエラーになってしまいます。本記事では、JSXでif文以外で条件分岐を記述する方法についてまとめています！

maaengineerhouse.com

これを応用することで、style属性内のCSSの記述を条件に応じて分岐させることができます。

~ 省略 ~
const isRed = true;
return (
  // isRed　が　true　のため、"red"の方が適用されます。（falseの場合は"#333"が適用される）
  <p style={{ color: isRed ? "red" : "#333", fontSize: "16px"; }}>
    テキストテキストテキスト
  </p>
);
~ 省略 ~

オブジェクトとして外部に書き出す

Reactでのstyle属性の記述は、外部に書き出して変数に格納しておくこともできます。

~ 省略 ~
const style = { color: "red", fontSize: "16px"; };
return (
  <p style={style}>
    テキストテキストテキスト
  </p>
);
~ 省略 ~

変数に格納しておくことで、使い回しが効くようになり、style属性を使った方法でより効率的にスタイリングを行うことができるようになります。

まとめ

Reactでstyle属性にCSSを記述してスタイリングを行う方法について解説しました。

Reactでスタイリングを行う方法は他にもあるので、いろいろなスタイリング方法をマスターできると実装の幅が広がります。