Reactでのインラインスタイルの使用

Reactでスタイルを適用する簡単な方法の一つが、インラインスタイルの使用です。これはHTML要素にstyle属性を使ってスタイルを追加する方法と似ています。

主な違いは、Reactではstyle属性の値がCSS文字列ではなくJavaScriptオブジェクトである点です。

以下は、JSX内で直接インラインスタイルを適用する例です。

const App = () => (
  <>
    <h1
      style={{
        fontWeight: 700,
        fontSize: "32px",
        color: "rebeccapurple",
      }}
    >
      App title
    </h1>
  </>
);

この例では、h1要素がstyle属性を通じてスタイルを受け取っており、その値はJavaScriptオブジェクトです。

インラインスタイルの重要なルール

Reactでインラインスタイルを使用する際は、次のルールに注意してください。

• 2語以上のCSSプロパティ名はキャメルケースで記述
  • font-weight → fontWeight;
  • background-color → backgroundColor。
• 値は通常文字列で記述："32px"、"red"、"rebeccapurple";
• 一部のプロパティは数値を直接指定可能：fontWeight: 700。

これらのルールは、インラインスタイルが通常のCSSではなくJavaScriptで記述されるために存在します。

インラインスタイルを別オブジェクトとして定義

JSXをより見やすく、整理された状態に保つために、インラインスタイルを別のJavaScriptオブジェクトとして保存し、それをstyle属性に渡すことができます。

const appStyles = {
  fontWeight: 700,
  fontSize: "32px",
  color: "rebeccapurple",
};

const App = () => (
  <>
    <h1 style={appStyles}>App title</h1>
  </>
);

インラインスタイルを使用するタイミング

インラインスタイルが最適なケース：

• 小規模なコンポーネント
• 動的なスタイル
• 素早いビジュアル調整

大規模なレイアウトや複雑なスタイリングには適していないため、外部CSSの利用が一般的です。