React CSSを使用するサンプル

ReactでCSSを使用するサンプルです。

サンプル	ファイルの構成
	CSSをstyleで指定する
	CSSをオブジェクトで指定する

ファイルの構成

同じフォルダ内にApp.jsxとindex.jsとindex.htmlがあります。

プロジェクトフォルダ-srcフォルダ-App.jsxとindex.jsとindex.html

CSSをstyleで指定する

jsxのファイル(App.jsx)

export const App1 = () => {
  return (
    <>
      <p style={{ backgroundColor: "yellow" }}>CSSのテスト</p>
    </>
  );
};

4行目は、CSSの指定で背景色が黄色になります。
backgroundColorはキャメルケースの形式です。background-colorでは動きません。

jsのファイル(index.js)

import ReactDOM from "react-dom";
import { App1 } from "./App";

ReactDOM.render(<App1 />, document.getElementById("root"));

2行目は、App.jsxのApp1とひも付きます。

htmlのファイル(index.html)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

9行目のdivの下にボタンが追加されます。

CSSをオブジェクトで指定する

上記のファイルのうちapp.jsxのみ修正します。

export const App1 = () => {
  const test1 = {
    color: "red",
    backgroundColor: "yellow",
  };
  return (
    <>
      <p style={test1}>CSSのテスト</p>
    </>
  );
};

2行目は、CSSオブジェクトです。文字の色と背景色を指定しています。
8行目は、セレクトボックスが表示されます。