CSSの当て方の種類について

Reactではスタイル（CSS）の当て方が色々とあります。ここではその中でも以下のメジャーな5種類を紹介しようと思います。
・Inline Style
・CSS Modules
・Styled JSX
・styled components
・Emotion

※今回紹介する5種類のスタイルのプレビューは全て以下のようになります。

Inline Style

JavaScriptのオブジェクトの形でCSSプロパティと、値を指定し、タグのstyleに設定することでスタイル（CSS）を適用させる方法になります。
※注意点
・プロパティ名はキャメルケースで指定する
・値は文字列or数値

以下の書き方はJSXに直接記述する方法です。

Inline Style　直接記述

return (
    <>
        <div style={{ border: "solid 3px purple", borderRadius: "30px", margin: "10px", padding: "10px" }}>
            <p style={{ color: "black", fontSize: "30px", textAlign: "center" }}>アリーヴェデルチ！</p>
        </div>
    </>
);

以下の書き方はオブジェクトとして事前に定義してからスタイルを指定する方法です。

Inline Style　事前定義

const App = () => {
    const containerStyle = {
        border: "solid 3px purple", 
        borderRadius: "30px", 
        margin: "10px", 
        padding: "10px"
    };
    const textStyle = {
        color: "black", 
        fontSize: "30px", 
        textAlign: "center"
    };

    return (
        <>
            <div style={ containerStyle }>
                <p style={ textStyle }>アリーヴェデルチ！</p>
            </div>
        </>
    );
};

CSS Modules

従来のWeb開発と同様にCSSファイルを別で作成し、そこからスタイル（CSS）を適用させる方法になります。しかし、React開発ではコンポーネント毎にCSSファイルを分けて用意する場合が多いのでファイル管理が大変です。

CSS Modulesでは、ターミナルやコマンドプロンプトで以下のコマンドを実行してモジュールをインストールし、スタイル（CSS）を適用させます。

npmでインストール

npm install node-css

yarnでインストール

yarn add node-css

※sassやscssを使用する場合は上記のnode-cssの部分をnode-sassまたはnode-scssと実行します。

CSS Modulesでは以下のように任意の名前（ここではclasses）でCSSファイルをimportし、各タグにclassName={ import時の任意の名称.クラス名 }と記述し、スタイル（CSS）を適用させます。

CSS Modules　コンポーネントファイル

import classes from "CSSのファイル名";

const App = () => {
    return (
        <>
            <div className={ classes.container }>
                <p className={ classes.text }>アリーヴェデルチ！</p>
            </div>
        </>
    );
};

CSS Modules　CSSファイル

.container {
    border: solid 3px purple;
    border-radius: 30px;
    margin: 10px;
    padding: 10px;
}
.text {
    color: black;
    font-size: 30px;
    text-align: center;
}

このように従来のWeb開発と近い感覚でCSSを適用できます。また、CSSクラス名のスコープはコンポーネント毎に閉じられるので同じ名前のクラス名を定義しても競合しないので命名の心配もいりません。

Styled JSX

ReactのフレームワークのNext.jsに標準搭載されているCSS-in-JSと呼ばれるライブラリになります。コンポーネント内にCSSを記述していき、スタイル（CSS）を適用させる方法になります。

Styled JSXでは、ターミナルやコマンドプロンプトで以下のコマンドを実行してモジュールをインストールし、スタイル（CSS）を適用させます。

npmでインストール

npm install styled-jsx

yarnでインストール

yarn add styled-jsx

Styled JSXでは以下のようにコンポーネント内でstyleタグを使用し、その中にCSSを記述し、スタイル（CSS）を適用させます。
ここでの注意点は各タグにclassName="クラス名"と記述します。

Styled JSX

const App = () => {
    return (
        <>
            <div className="container">
                <p className="text">アリーヴェデルチ！</p>
            </div>

            <style jsx>{`
                .container {
                    border: solid 3px purple;
                    border-radius: 30px;
                    margin: 10px;
                    padding: 10px;
                }
                .text {
                    color: black;
                    font-size: 30px;
                    text-align: center;
                }
            `}</style>
        </>
    );
};

styled components

採用しているプロジェクトが多い、人気のCSS-in-JSライブラリになります。スタイルを当てたコンポーネントを定義し、スタイル（CSS）を適用させる方法になります。

styled componentsでは、ターミナルやコマンドプロンプトで以下のコマンドを実行してモジュールをインストールし、スタイル（CSS）を適用させます。

npmでインストール

npm install styled-components

yarnでインストール

yarn add styled-components

styled componentsでは以下のようにstyled-componentsをimportし、各タグに任意の名称（大文字から始まる形にする）を付け、=のあとにstyled.HTMLに存在するタグを指定する事でそのタグを拡張した形でスタイル（CSS）を適用させます。そのあとは``で囲み通常のCSSと同じ記述をしていきます。

styled components

import styled from "styled-components";

const App = () => {
    return (
        <>
            <SContainer>
                <SText>アリーヴェデルチ！</SText>
            </SContainer>
        </>
    );
};

const SContainer = styled.div`
    border: solid 3px purple;
    border-radius: 30px;
    margin: 10px;
    padding: 10px;
`;
const SText = styled.p`
    color: black;
    font-size: 30px;
    text-align: center;
`;

Emotion

採用しているプロジェクトが多い、人気のCSS-in-JSライブラリになります。様々な使い方が用意されおり、上記で紹介してきたものと似たような書き方でスタイル（CSS）を適用させる方法になります。

Emotionでは、ターミナルやコマンドプロンプトで以下のコマンドを実行してモジュールをインストールし、スタイル（CSS）を適用させます。

npmでインストール

npm install @emotion/react @emotion/styled

yarnでインストール

yarn add @emotion/react @emotion/styled

※注意点としてEmotionを使用する場合は以下の記述が必須になります。

import

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

以下ではスタイル変数の定義時とタグ内にも使用し指定することでスタイル（CSS）を適用させる方法になります。注意点として、タグ内の属性はclassName={}ではなく、css={}と記述します。

Emotion　コンポーネントファイル内にCSSを記述

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

const App = () => {
    const containerStyle = css`
        border: solid 3px purple;
        border-radius: 30px;
        margin: 10px;
        padding: 10px;
    `;
    const textStyle = css`
        color: black;
        font-size: 30px;
        text-align: center;
    `;

    return (
        <>
            <div css={ containerStyle }>
                <p css={ textStyle }>アリーヴェデルチ！</p>
            </div>
        </>
    );
};

以下ではInline Styleのように記述し、スタイル（CSS）を適用させます。
上記と似たような記述ではありますが、注意点として、({})の中キャメルケースや文字列で値を記述します。

Emotion　Inline Styleのように記述

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

const App = () => {
    const containerStyle = css({
        border: "solid 3px purple", 
        borderRadius: "30px", 
        margin: "10px", 
        padding: "10px"
    });
    const textStyle = css({
        color: "black", 
        fontSize: "30px", 
        textAlign: "center"
    });

    return (
        <>
            <div css={ containerStyle }>
                <p css={ textStyle }>アリーヴェデルチ！</p>
            </div>
        </>
    );
};

以下ではstyled componentsと同じように記述し、スタイル（CSS）を適用させます。
※注意点として以下では別パッケージになっているので上記でのimportとは別の記述が必須になります。

import

/** @jsxImportSource @emotion/react */
import styled from "@emotion/styled";

Emotion　styled componentsと同じように記述

/** @jsxImportSource @emotion/react */
import styled from "@emotion/styled";

const App = () => {
    return (
        <>
            <SContainer>
                <SText>アリーヴェデルチ！</SText>
            </SContainer>
        </>
    );
};

const SContainer = styled.div`
    border: solid 3px purple;
    border-radius: 30px;
    margin: 10px;
    padding: 10px;
`;
const SText = styled.p`
    color: black;
    font-size: 30px;
    text-align: center;
`;

最後に

ここまで読んでくれてありがとうございます！ReactのCSSの当て方の種類について自分なりのメモ、アウトプットの一環として書きました。ReactのCSSの当て方は他にもTailwind CSSというフレームワークを使った方法もありますが、今回とは分けて書いた方がいいと思い（本当はめんどくさい）、次の記事で書くことにしました。他にもReactの記事を出しているので良かったらそちらもご覧ください。