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

スタイルオブジェクトを作成する方法

最も一般的な方法は、スタイルを定義するJavaScriptオブジェクトを作成し、要素のスタイルプロパティに割り当てることです。例えば、次のようなコードを記述します:

import React from 'react';
function MyComponent() {
  const myStyle = {
    color: 'red',
    fontSize: '16px',
    fontWeight: 'bold'
  };
  return <div style={myStyle}>インラインスタイルの例</div>;
}

上記の例では、myStyleという名前のオブジェクトを作成し、そのプロパティとしてcolor、fontSize、fontWeightを設定しています。その後、div要素のstyle属性にmyStyleを渡しています。

スタイルを直接指定する方法

もう一つの方法は、スタイルを直接指定することです。これは動的なスタイルを適用する場合に便利です。例えば、次のようなコードを記述します:

import React from 'react';
function MyComponent() {
  const fontSize = '20px';
  return <div style={{ color: 'blue', fontSize }}>動的なインラインスタイルの例</div>;
}

上記の例では、fontSizeという変数を使って動的にスタイルを設定しています。colorプロパティは直接指定されていますが、fontSizeプロパティは変数を使用しています。

これらはReactでインラインスタイルを使用する基本的な方法です。他にもさまざまなスタイリングオプションがありますが、これらの方法を使ってシンプルで簡単なインラインスタイルを実現することができます。