属性とスタイル ― classNameとstyle

導入

JSX は HTML に似ていますが、JavaScript の予約語との衝突を避けるため、いくつかの属性名が変わります。代表が class → className です。

説明

CSS クラスは className、インラインスタイルはオブジェクトで渡します。

function App() {
  const boxStyle = {
    padding: "12px",
    border: "2px solid #0891b2",
    borderRadius: "8px",
    color: "#0e7490",
  };
  return (
    <div style={boxStyle}>
      <h2 className="title">スタイル付きのボックス</h2>
      <p>style はオブジェクトで、プロパティは camelCase で書きます。</p>
    </div>
  );
}

• style={{ ... }} … 外側の {} は「JSXへの埋め込み」、内側の {} は「JavaScriptのオブジェクト」。だから波かっこが2重になります。
• background-color のようなCSSプロパティは、JSX では backgroundColor と camelCase で書きます。
• 値は基本的に文字列（"12px"）で書きます。

やってみよう

boxStyle の border の色や borderRadius の値を変えて、見た目がどう変わるか確かめてみましょう。backgroundColor を足して背景色を付けてみてください。