要素にスタイル属性を指定する

このレッスンでは、React コンポーネントにスタイルを適用する基本的な方法を学びます。
React では、style属性を使って要素にスタイルを適用することができます。普通の HTML と似ていますが、少しだけ違いがあります。

React で style 属性を使った書き方

React では、style属性にJavaScript のオブジェクトを渡してスタイルを定義します。

<div style={{ プロパティ名: "値" }}>
  表示したい内容
</div>;

キャメルケースに変換する

CSS プロパティ名がハイフンで区切られている場合は、キャメルケースに変換します。

値も文字列で指定する

スタイルの値を設定するとき、色やピクセル単位のサイズなどはすべて文字列で指定します。

シングルクォート（'）とダブルクォート（"）どっちでもOK！

ただし、単位が不要な数値の場合は、クォートなしで数値をそのまま使うことができます。

<div style= {{ opacity : 0.5 }}>
  透明度が50%
</div>

style属性を使ってスタイリングした実際のコードはこんな感じ 👇

export function App() {
  return (
    <div
      style={{
        color: "white",
        fontSize: "18px",
        backgroundColor: "#ffbc2d",
        padding: "5px 10px",
      }}
    >
      これはスタイリングの例です。
    </div>
  );
}