ReactでCSSを利用する方法

Reactでスタイル設定を行う方法についていくつか試してみます。

インラインスタイル

まずはインラインスタイルでの設定を試してみます。
オブジェクト形式でスタイルを用意して適用します。

export default function Button() {
  const style = {
    appearance: 'none',
    padding: '10px 20px',
    border: 'none',
    borderRadius: 5,
    color: 'white',
    background: 'purple',
  }

  return (
    <button style={style}>ボタン</button>
  )
}

border-radiusのようなハイフンのあるプロパティの場合、キャメルケースにするかダブルクォーテーションで括って指定します。
インラインスタイルのデモページ
インラインスタイルになるので、疑似要素やメディアクエリは使用できません。

CSSファイルのインポート

次にCSSファイルをインポートする方法を試してみます。
Reactでのclass属性はclassNameを使った指定になります。

import "./Button.css";

export default function Button() {
  return (
    <button className="button">ボタン</button>
  )
}

Button.css

.button {
  appearance: none;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  color: white;
  background: purple;
}

CSSファイルのインポートのデモページ
今回はButtonのコンポーネント内でインポートしていますが、CSSはグローバルなのでコンポーネント外にも適用される点に注意が必要です。

CSS Modules

次にCSS Modulesを試してみます。

import styles from "./Button.module.css";

export default function Button() {
  return (
    <button className={styles.button}>ボタン</button>
  )
}

1行目でインポートしているButton.module.cssは以下の通りです。

.button {
  appearance: none;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  color: white;
  background: purple;
}

CSS Modulesのデモページ
最終的にclass名は一意になるので、CSSはコンポーネント内で完結させることができます。

styled-components(CSS in JS)

次にstyled-componentsを試してみます。
まずはパッケージのインストールを行います。

npm install styled-components --save-dev

styled-componentsを使用した形に記述を変更します。

import styled from "styled-components";

const Btn = styled.button`
  appearance: none;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  color: white;
  background: purple;
`;

export default function Button() {
  return (
    <Btn>ボタン</Btn>
  )
}

この場合もclass名は一意になるので、CSSをコンポーネント内で完結させることができます。
styled-componentsのデモページ

Tailwind CSS

最後にTailwind CSSを試してみます。
必要なパッケージをインストールします。

npm install tailwindcss postcss autoprefixer --save-dev

Tailwind CSSとPostCSSの設定ファイル(tailwind.config.js と postcss.config.js)を作成します。

npx tailwindcss init -p

tailwind.config.js内にファイルパスの追加を行います。

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

サイト全体で使用するCSS内に下記を追加します。

@tailwind base;
@tailwind components;
@tailwind utilities;

これでTailwind CSSを使用する準備ができたので、設定を試してみます。

export default function Button() {
  return (
    <button
      className="appearance-none py-2.5 px-5 border-none rounded-md text-white bg-purple-600"
    >ボタン</button>
  )
}

Tailwind CSSのデモページ