【React】CSSのいろんな当て方

2021.11.23

Reactでは、いろんな方法でCSSを当てることができます。
それら複数ある方法についてまとめた。

まず前提知識として、React内にCSSを記述する場合は、CSS-in-JSと言われる、純粋なCSSとは異なる記法で記述します。

目次
  1. CSS記法とJavaScript埋め込みのCSS（CSS-in-JS）の記法の違い
  2. style入れ込み
  3. CSS module
  4. Styled JSX
  5. Styled components
  6. Emotion
  7. まとめ

CSS記法とJavaScript埋め込みのCSS（CSS-in-JS）の記法の違い

異なるのは以下3点

  • キャメルケース
  • 末尾のセミコロン;有無
  • 文字列とするか

純粋なCSSの記法

border-radius: 8px;

これを、JavaScript 埋め込みのCSSで書くと

borderRadius: "8px"

それでは、Reactで使われる、CSSの異なる4種類の方法について見ていきましょう！

  • CSS module
  • Styled JSX
  • Styled components
  • Emotion

違いを表にまとめました！

この中から、どれを使用するかは人、またはチームの好みでうので、ご自身でご選択して使用してください。

style入れ込み CSS module Styled JSX Styled components Emotion
バッククウォートを使った書き方 inlinestyleと似た書き方 styledを使った記法
CSS記法 React CSS

CSS

 CSS CSS React CSS
CSS記述場所 タグ内 別ファイル

JSX内

 コンポーネント内 JSX内 JSX内 同ファイル内

とは言っても、どれ使ったら良いのかわからないですよね！

同ファイル内に記述ができて、且つ、JSXの外に記述することでスッキリするStyled componentsがおすすめです。

style入れ込み

タグに入れ込む形で記述することができます。

<div style={{ alignItems: "center" }}>

CSS module

まずは、node-sassをインストールします。

$ npm install node-sass

インストールされているかどうかはpackage.jsonでの確認が可能。

CSSファイルを.module.sassファイルで作成します。

.container {
  border: solid 2px green;
}

このCSSをApp.jsでimportし、コンポーネントとして記述します。

import { CssModules } from "./components/CssModules";

export default function App() {
  return (
    <div className="App">
      <CssModules />
    </div>
  );
}

CssModules.module.scssファイルに記述したCSSを呼び出す変数をclassesとし、classes.containerでCSSの呼び出しができます。

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

export const CssModules = () => {
  return (
    <div className={classes.container}>
      <p>CSS MODULES</p>
      <button>Push</button>
    </div>
  );
};

この記法の特徴

  • CSSは別ファイルで記述するのでCSSを1ファイルにまとめられる。
  • 素のCSSの記法でOK

そのため、CSSの設定が多くなりそう、CSSの素の記法で書きたい

と、いった場合にこの方法を選択するのが吉

Styled JSX

これは、CSSをJavaScriptに書くことができる方法です。

ますは、styled-jsxをインストールします。

$ npm install styled-jsx

StyledJSXコンポーネントを作成し、親コンポーネントApp.jsでimportします。

import { StyledJsx } from "./components/StyledJsx";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <StyledJsx />
    </div>
  );
}

StyledJSXコンポーネントの中で以下を記述します。

  • styleタグを設け、その中にjsxを明記しJavaScriptを書く
  • CSSは{` `}の形で、テンプレート文字列で書く
  • CSSを当てるタグにclassNameを指定する
export const StyledJsx = () => {
  return (
    <>
      <div className="container">
        <p>Styled JSX</p>
        <button>Push</button>
      </div>
      <style jsx="true">{`
        .container {
          border: solid 2px green;
        }
      `}</style>
    </>
  );
};

この記法の特徴

  • CSSを、コンポーネント内、かつJSX内に記述
  • 素のCSSの記法でOK

素のCSSの記法で同ファイル内に記述したい場合、選択するのが吉

Styled components

styled-componentsをインストール

$ npm install styled-components

StyledComponentsコンポーネントを作成し、親コンポーネントApp.jsでimportする。

import { StyledComponents } from "./components/StyledComponents";

export default function App() {
  return (
    <div className="App">
      <StyledComponents />
    </div>
  );
}

変数名をstyledとして、styled-componentsをimport。

変数をContainerとし、CSSを記述

divタグを、ここで作ったContainerに置き換える。

import styled from "styled-components";

export const StyledComponents = () => {
  return (
    <Container>
      <p>Styled Components</p>
      <button>Push</button>
    </Container>
  );
};

const Container = styled.div`
  border: solid 2px green;
`;

これの問題点

このコンポーネントがstyleを当てただけのものなのか、他のコンポーネントからインポートしたコンポーネントなのかがわかりにくいので、頭にStyleのイニシャルであるSを付けるなど、わかりやすい目印を付けるとよい！

この記法の特徴

  • CSSを同ファイル内に記述
  • タグで対象を指定できる
  • 素のCSSの記法でOK

Emotion

Emotionを使ったCSSの書き方は3種類あります。

  • バッククウォートを使った書き方
  • inlinestyleと似た書き方
  • styledを使った書き方

@emotion/react と @emotion/styled をインストール

$ yarn add @emotion/react @emotion/styled

Emotionコンポーネントを作成し、親コンポーネントApp.jsでimportします。

import { Emotion } from "./components/Emotion";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <Emotion />
    </div>
  );
}

jsxをimport する。

ReactでEmotionを使用するときのルールとして、importの前に以下を記述する。

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

Emotionからcssをimport

バッククウォートを使った書き方

変数containerStyleにcssを設定し、divタグで指定する。

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

export const Emotion = () => {
  const containerStyle = css`
      border: solid 2px green;
      `;
  return (
    <div css={containerStyle}>
      <p>Emotion</p>
      <button>Push</button>
    </div>
  );
};

この記法の特徴

  • CSSをJSX内に記述
  • バッククウォートでシンプルに掛ける
  • 素のCSSの記法でOK

inlinestyleと似た書き方

上記との違いはcssの後の( )部とCSSの書き方。

これは、CSSをReactの記法とする必要がある。

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

export const Emotion = () => {
  const containerStyle = css({
    border: "solid 2px green"
  });
  return (
    <div css={containerStyle}>
      <p>Emotion</p>
      <button>Push</button>
    </div>
  );
};

この記法の特徴

  • CSSをJSX内に記述
  • 上記に対しバッククウォート部が{ }に変わる
  • ReactのCSSの記法

styledを使った記法

styledをimport

Containerという変数でCSSを定義し、divタグを置き換える。

/** @jsxRuntime classic */
/** @jsx jsx*/
import styled from "@emotion/styled";

export const Emotion = () => {
  return (
    <Container>
      <p>Emotion</p>
      <button>Push</button>
    </Container>
  );
};

const Container = styled.div`
  border: solid 2px green;
`;

この記法の特徴

これはstyled componentsと同じ

まとめ

以上、いろいろなCSSの書き方についてまとめました。

基本的なところはあまり違いがないものの、少しずつ異なるのが厄介ですね。

ただ、手間なのは一番最初の記述だけです。一個覚えてしまっておじゃれなデザインをつくっていきましょう！

ご覧いただきありがとうございました。

コメント