【React 入門】スタイル（CSS）の当て方のまとめ

Inline Style
CSS Modules
Styled JSX
styled components
Emotion

Inline Style

これは、JavaScript のオブジェクトとしてスタイルを定義し、要素のstyle 属性に当てるという方法です。

import React from 'react';
import { Sample } from './components/Sample';

export const App = () => {
    return (
        <div>
            <Sample />
        </div>
    )
}

export const Sample = () => {
    const pStyle = {
        fontSize: '18px',
        color: 'blue'
    }
    const buttonStyle = {
        padding: '6px 12px',
        border: 'none',
        borderRadius: '5px'
    }
    return (
        <div>
            <p style={pStyle}>sample</p>
            <button style={buttonStyle}>click</button>
        </div>
    )
}

オブジェクトとして定義するため、普通のCSSの書き方とは異なる点に注意が必要です。

CSS Modules

これは、CSSファイルをつくり、それを読み込んでクラスを当てるという方法になります。

ファイル名は「○○.module.css」になります。

今回は、「Sample.js」と同階層に、
「Sample.module.css」を作りました。

.pStyle {
    font-size: 18px;
    color: blue
}
.buttonStyle {
    padding: 6px 12px;
    border: none;
    border-radius: 5px;
}

import classes from './Sample.module.css'

export const Sample = () => {
    return (
        <div>
            <p className={classes.pStyle}>sample</p>
            <button className={classes.buttonStyle}>click</button>
        </div>
    )
}

クラス名を指定するときに「className={}」となることに注意してください。

ブラウザの表示はさきほどと同様です。

Styled JSX

これは、JSXの中でスタイルを定義できるようにする方法です。

パッケージをインストールする必要があるので、以下のコマンドを実行します。

npm install --save styled-jsx

実行後、package.json の”dependencies”に”styled-jsx”が含まれていればOKです。

では、「Sample.js」を以下のように修正します。

export const Sample = () => {
    return (
        <>
            <div>
                <p className="pStyle">sample</p>
                <button className="buttonStyle">click</button>
            </div>

            <style jsx="true">{`
                .pStyle {
                    font-size: 18px;
                    color: blue
                }
                .buttonStyle {
                    padding: 6px 12px;
                    border: none;
                    border-radius: 5px;
                }
            `}</style>
        </>
    )
}

まず、以下のような形式でスタイルを書きます。

<style jsx="true">{`スタイル`}</style>

そして、className=”クラス名” という形で要素に付与します。

ブラウザの表示はさきほどと同様です。

styled components

これは、スタイルを定義したコンポーネントを使うという方法になります。

まずはパッケージをインストールするため、以下のコマンドを実行します。

npm install --save styled-components

では、「Sample.js」を以下のように修正します。

import styled from 'styled-components'

export const Sample = () => {
    return (
        <div>
            <StyleP>sample</StyleP>
            <StyleButton>click</StyleButton>
        </div>
    )
}

const StyleP = styled.p`
    font-size: 18px;
    color: blue;
`
const StyleButton = styled.button`
    padding: 6px 12px;
    border: none;
    border-radius: 5px;
    &:hover {
        background: blue;
        color: white;
    }
`

ご覧のように、StyleP や StyleButton という名前のコンポーネントとして定義します。
（命名は自由です）

そして、今回は

import styled from 'styled-components'

としているため、styled.要素`スタイル` という形式でスタイルを定義します。

また、sassの記法が使えるため、ホバー処理なども一緒に書くことができます。

    &:hover {
        background: blue;
        color: white;
    }

Emotion

これは、Inline Style や styled components をまとめて使用できるようにするような機能になります。

まずはパッケージをインストールするため、以下の２つのコマンドを実行します。

npm install --save @emotion/react

npm install --save @emotion/styled

では、「Sample.js」を以下のように修正します。
p要素をInline Style、button要素をstyled componentsでスタイリングしています。

/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx, css } from '@emotion/react'
import styled from '@emotion/styled'

export const Sample = () => {
    const styleP = css`
        font-size: 18px;
        color: blue;
    `
    return (
        <div>
            <p css={styleP}>sample</p>
            <StyleButton>click</StyleButton>
        </div>
    )
}

const StyleButton = styled.button`
    padding: 6px 12px;
    border: none;
    border-radius: 5px;
    &:hover {
        background: blue;
        color: white;
    }
`

まず、Inline Style のように使用したい場合は以下の２通りの書き方があります。

const styleP = css`
    font-size: 18px;
    color: blue;
`
/**CSSの記述方法 */

または

const styleP = css({
    fontSize: '18px',
    color: 'blue'
})
/**JavaScriptのオブジェクトの記述方法 */

とし、要素には css={変数名} とすることでスタイルを当てられます。

styled components として使用したい場合は特に変わらないですね。

ブラウザの表示は同様です。

今回は以上になります。
ご覧いただきありがとうございました！

続きはこちら↓