Reactコンポーネントをスタイリングするための方法5つをまとめました。

Inline Style

• Reactコンポーネント内で直接スタイルを指定する方法
• コンポーネント固有のスタイルになり、他のコンポーネントに影響を与えない
• JavaScriptのオブジェクトとしてスタイルを指定できる
• Reactがデフォルトで提供しているので、ライブラリをインストールする必要はない

メリット

• JavaScriptのオブジェクトを使ってスタイルを設定することで、動的なスタイルを簡単に変更できる
• Reactコンポーネント内でスタイルを管理するので、コードが整理されて見やすくなる

注意点

• JavaScriptのオブジェクトのため、CSSのプロパティ名の書き方が違う（Camel Caseで書く）
• 値はシングルクォーテーションで囲う必要がある

import React from 'react';

export const InlineStyle = () => {
  const containerStyle = {
    backgroundColor: 'lightblue',
    color: '#000',
    fontSize: '16px',
    padding: '10px'
  };
  const titleStyle = {
    //css
  };
  const buttonStyle = {
    //css
  };

  return (
    <div style={containerStyle}>
      <h2 style={titleStyle}>Title</h2>
      <button style={buttonStyle}>button</button>
    </div>
  )
}

CSS Modules

• CSSファイルをモジュールとしてインポートし、コンポーネントごとにスコープを提供する方法
• クラス名の衝突を解決するために作られた
• importした要素にクラス名があたるので、競合しない
• node-sassをimportしたらscss記法が使える

注意点

• CSSファイルを分けてimportする必要がある
• ファイル名は sample.module.css というように module と入れる必要がある
  import styles from './sample.module.css';

CssModules.jsx

import React from 'react';
import styles from './CssModules.module.scss'

export const CssModules = () => {
  return (
    <div className={styles.container}>
      <h2 className={styles.title}>Title</h2>
      <button className={styles.button}>button</button>
    </div>
  )
}

CssModules.module.scss

.container {
  background-color: lightblue;
  color: #000;
  font-size: 16px;
  padding: 10px;
}

.title {
  //css
}

.button {
  //button
}

Styled JSX（CSS in JS）

• Reactコンポーネント内にCSSスタイルを埋め込む方法
• styleタグを記述し、コンポーネントごとに固有のスタイルを簡単に定義できる
• Next.jsにはデフォルトで入っている

注意点

• style jsx="true" でjsxであるということを明記する

export const StyledJsx = () => {
  return (
    <>
      <div className="container">
        <h2 className="title">Title</h2>
        <button className="button">button</button>
      </div>
      <style jsx="true">{`
        .container {
          background-color: lightblue;
          color: #000;
          font-size: 16px;
          padding: 10px;
        }
        .title {
          //css
        }
        .button {
          //css
        }
      `}</style>
    </>
  );
};

styled components

• コンポーネント内にスタイルを埋め込むためのライブラリ
• scss記法が使える
• 変数やpropsを使ってスタイルを動的に変更することも可能

注意点

• スタイルをあてた要素なのか、importした要素なのかわかりづらい

インストール

npm i styled-components

import styles from "styled-components";

export const StyledJsx = () => {
  return (
    <Container>
      <Title className="title">Title</Title>
      <Button className="button">button</Button>
    </Container>
  );
};

const Container = styles.div`
  background-color: lightblue;
  color: #000;
  font-size: 16px;
  padding: 10px;
`

const Title = styles.h2`
  //css
`

const Button = styles.button`
  //css
`

Emotion（CSS in JS）

• JavaScript内でCSSスタイルを作成し、コンポーネントに割り当てるライブラリ

Reactでのインストール

npm i @emotion/react

どのフレームワークでも使えるインストールは以下

npm i @emotion/css

書き方①

/** @jsxRuntime classic */
/** @jsx jsx*/

import { jsx, css } from "@emotion/react";

export const Emotion = () => {
  const containerStyle = css`
    background-color: lightblue;
    color: #000;
    font-size: 16px;
    padding: 10px;
  `

  return (
    <div css={containerStyle}>
      <h2 className="title">Title</h2>
      <button className="button">button</button>
    </div>
  );
};

書き方②

Inline Styleに似た書き方

/** @jsxRuntime classic */
/** @jsx jsx*/

import { jsx, css } from "@emotion/react";

export const Emotion = () => {
  const containerStyle = css({
    backgroundColor: "lightblue",
    color: "#000",
    fontSize: "16px",
    padding: "10px"
  })

  return (
    <div css={containerStyle}>
      <h2 className="title">Title</h2>
      <button className="button">button</button>
    </div>
  );
};

書き方③

import styles from "@emotion/styled"

export const Emotion = () => {
  return (
    <Container>
      <h2 className="title">Title</h2>
      <button className="button">button</button>
    </Container>
  );
};

const Container = styles.div`
  background-color: lightblue;
  color: #000;
  font-size: 16px;
  padding: 10px;
`

参考
Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版