React でインライン スタイルを使用して背景色を設定する

1. React のインライン スタイル
2. React でインライン スタイルを使用して背景色を設定する
3. まとめ

スタイルとクラスを動的に適用する機能は、React の優れた機能の 1つです。 この記事では、React でインライン スタイルを設定して背景色を変更する方法について説明します。

React のインライン スタイル

インライン スタイルを使用すると、React のテンプレート言語である JSX 内で要素を直接スタイル設定できます。 React アプリケーションを簡単に構築するのに役立ちます。

HTML と同じように、React でもインライン スタイルを適用できます。 ただし、インライン スタイルと CSS スタイルにはいくつかの違いがあります。

JSX は HTML によく似ていますが、JavaScript を記述するためのシンタックス シュガーです。 このため、すべての CSS ルールは JavaScript オブジェクトとしてフォーマットする必要があります。

個々のスタイルは、オブジェクトのキーと値のペアとして記述する必要があります。 ダッシュで区切られる CSS プロパティは一緒にプッシュされます。

たとえば、font-size CSS プロパティは fontSize になります。 これらのプロパティの値は、文字列、整数、またはブール値である必要があります。

React でインライン スタイルを使用して背景色を設定する

前述のルールに従って、CSS プロパティ background-color は React インライン スタイルでは backgroundColor になります。 このプロパティの値は、名前付きの色の文字列である必要があります。

構文：

<div style={{ backgroundColor: "red"}}></div>

または、CSS の場合と同様に、HEX コードまたは RGBA を使用することもできます。

<div style={{ backgroundColor: "#ff0000"}}></div>

React でインライン スタイルを適用する方法の例を見てみましょう。

コードスニペット：

import "./styles.css";

export default function App() {
  return <div style={{ backgroundColor: "red", padding: 100 }}></div>;
}

出力：

CodeSandbox でライブ デモをご覧いただけます。 要素を調べると、React インライン スタイルは通常の CSS に変換されます。

まとめ

多くの初心者は、React のインライン スタイルの構文に混乱します。 重要なことは、複数の単語名を持つ CSS プロパティが組み合わされて CamelCase になることを覚えておくことです。

また、プロパティ名は文字列である必要はありません。 最後に、値は文字列、整数、またはブール値のいずれかでなければなりません。