Zenn
🦋

React で CSS のあて方（モジュール・styled-jsx・styled-components・Emotion）

2022/04/17に公開
CSS
JavaScript
React
tech

css でスタイルを設定する方法はいくつか用意されておりライブラリも色々あります。
その中から良く使われている以下の5つの方法を紹介します。

  • インラインで指定
  • モジュールを使う方法
  • styled-jsx (CSS in JS)
  • styled-components (SCC in JS)
  • Emotion

デフォルト（インライン）

Reactでデフォルトで提供されている方法。
キャメルケースで変数名を宣言しCSSをオブジェクトで書いてインラインで指定。

export const InlineStyle = () => {
  const containerStyle = {
    border: "solid 2px #329eff",
    borderRadius: "20px",
    padding: "8px",
    margin: "8px",
    display: "flex",
    justifyContent: "space-around",
    alignItems: "center"
  };
  const titleStyle = {
    margin: 0,
    color: "#3d84a8"
  };
  const buttonStyle = {
    backgroudColr: "#abedd8",
    border: "none",
    padding: "8px",
    borderRadius: "8px"
  };

  return (
    <div style={containerStyle}>
      <p style={titleStyle}> Inline Style </p>
      <button style={buttonStyle}> Button </button>
    </div>
  );
};

モジュール

今回は対象のコンポーネントを CssModules.jsx 、モジュールファイルをCssModules.module.css とする。node-css を npm でインストールしモジュールファイルを作成。

.container {
  border: solid 2px #329eff;
  border-radius: 20px;
  padding: 8px;
  margin: 8px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.title {
  margin: 0;
  color: #3d84a8;
}
.button {
  background-color: #319fff;
  border: none;
  padding: 8px;
  border-radius: 8px;
}

コンポーネント側で読み込んでクラスを指定。

import classes from "./CssModules.module.css";

export const CssModules = () => {
  return (
    <div className={classes.container}>
      <p className={classes.title}> Css Modules </p>
      <button className={classes.button}> Button </button>
    </div>
  );
};

styled-jsx (CSS in JS)

styled-jsx をインストール。コンポーネントに <style jsx="true"> を使ってCSSを指定することができる。

export const StyledJsx = () => {
  return (
    <>
      <div className="container">
        <p className="title"> Styled Jsx </p>
        <button className="button"> Button </button>
      </div>
      <style jsx="true">{`
        .container {
          border: solid 2px #329eff;
          border-radius: 20px;
          padding: 8px;
          margin: 8px;
          display: flex;
          justify-content: space-around;
          align-items: center;
        }
        .title {
          margin: 0;
          color: #3d84a8;
        }
        .button {
          background-color: #319fff;
          border: none;
          padding: 8px;
          border-radius: 8px;
        }
      `}</style>
    </>
  );
};

styled-components (CSS in JS)

styled-components をインストール。styled. を使ってタグごとにCSSを指定することができる。

import styled from "styled-components";

export const StyledComponents = () => {
  return (
    <Container>
      <Title> Styled Components </Title>
      <Button> Button </Button>
    </Container>
  );
};

const Container = styled.div`
  border: solid 2px #329eff;
  border-radius: 20px;
  padding: 8px;
  margin: 8px;
  display: flex;
  justify-content: space-around;
  align-items: center;
`;

const Title = styled.p`
  margin: 0;
  color: #3d84a8;
`;

const Button = styled.button`
  background-color: #319fff;
  border: none;
  padding: 8px;
  border-radius: 8px;
`;

Emotion

@emotion/react をインストール。インラインスタイルのようにしてCSSを指定する場合は以下のように書ける。

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

export const Emotion = () => {
  const containerStyle = css`
    border: solid 2px #329eff;
    border-radius: 20px;
    padding: 8px;
    margin: 8px;
    display: flex;
    justify-content: space-around;
    align-items: center;
  `;
  const titleStyle = css({
    margin: 0,
    color: "#3d84a8"
  });
  return (
    <div css={containerStyle}>
      <p css={titleStyle}> Emotion </p>
    </div>
  );
};

styled-components のような書き方だと以下のようになる。

import styled from "@emotion/styled";

export const Emotion = () => {
	・・・
	return (
    <div css={containerStyle}>
      <p css={titleStyle}> Emotion </p>
      <Button> Button </Button>
    </div>
  );
};

const Button = styled.button`
  background-color: #319fff;
  border: none;
  padding: 8px;
  border-radius: 8px;
`;

まとめ

ReactでCSSを当てる以下の方法について書きました。

  • インラインで指定
  • モジュールを使う方法
  • styled-jsx (CSS in JS)
  • styled-components (SCC in JS)
  • Emotion

複数の指定方法があるので初見だと難しく感じることもあるかもしれませんが区別して読み解けば簡単ですね。CSSを触る際の参考になれば幸いです。

参考

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

Discussion