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

React

ReactでのCSSの当て方はいろんな方法が存在する。それら複数ある方法について、代表的な3つをまとめた。

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

CSS記法とJavaScript埋め込みのCSSの記法の違い

異なるのは以下3点

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

純粋なCSSの記法

border-radius: 8px;

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

borderRadius: "8px"

それでは、異なる4種類の方法について見ていきます!

  • CSS module
  • Styled JSX
  • Styled components
  • Emotion

styleを入れ込む

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

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

こんなふうにstyleを入れることができる。

CSS module

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

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

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

.container {
  border: solid 2px green;
}

このCSSをコンポーネントとしてApp.jsに記述

CssModulesコンポーネントを呼び出し。

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

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

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の記法で書くことができる。

Styled JSX

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

styled-jsxをインストールする

StyledJSXコンポーネントを作成

親コンポーネントApp.jsで読み込み

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をコンポーネント内に記述し、素のCSSの記法で書くことができる。

Styled components

これは、styleを当てたコンポーネントをimportするライブラリ。

styled-componentsをインストール

StyledComponentsコンポーネントを作成

親コンポーネントApp.jsで読み込み

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

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

変数名をstyledとして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を当てただけのものなのか、他のコンポーネントからインポートしたコンポーネントなのかがわかりにくいので、わかりやすい目印があるよ良い!

CSSをコンポーネント内に記述、且つタグで指定し、素のCSSの記法で書くことができる。

Emotion

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

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

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

Emotionコンポーネントを作成

親コンポーネントApp.jsで読み込み

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>
  );
};

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>
  );
};

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;
`;

まとめ

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

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

コメント

タイトルとURLをコピーしました