https://www.gatsbyjs.org/packages/gatsby-plugin-emotion/?=emotion

パッケージのインストール

まずは必要パッケージをインストールします。

yarn add gatsby-plugin-emotion @emotion/core @emotion/styled

設定ファイルの変更

(この際、おそらくプラグインリストの最初に入れる必要があると思います。なぜなら、Emotion の Babel プラグインリストにおいては、先頭に入れるように指示があるからです。)

gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-emotion`,
      options: {
        // Accepts all options defined by `babel-plugin-emotion` plugin.
      },
    },
  ],
}

Emotion 本体の使い方

Emotion の公式ドキュメントを翻訳していますので、こちらもご参照ください。

色、breakPoint を変数で管理する

  • 単体で出力する場合には export const
  • オブジェクトにまとめたい場合には、一旦個別に変数と宣言したのち export const something = { val1, val2 } とオブジェクトにまとめて出力
constants.js 変数を管理
export const breakPoint = "751px";

const baseBlue = "#0763B0";
const baseWhite = '#FFFFFF'
export const color = {
  baseBlue,
  baseWhite
};

Media Queries を使って改行をコントロールする関数

デザインの関係で SP/PC で改行位置をコントロールしたいことがあります。CSS を使う場合は面倒な印象がありました。

以下の手法は CSS 時代と同じではありますが、関数として一回作成してしまえば、他のプロジェクトでも使い回しが聞くので多少心理的な面倒さが下がるかなと思います。

単に関数なので、引数として渡した値と media query を使って改行をコントロールできます。

switchBreak.js
import { css } from "@emotion/core";
import { breakPoint } from "src/constants/constants";

const switchBreak = mode => {
  switch (mode) {
    case "sp":
      return css`
        @media (min-width: ${breakPoint}) {
          display: none;
        }
      `;
    case "pc":
      return css`
        display: none;
        @media (min-width: ${breakPoint}) {
          display: block;
        }
      `;
    case "both":
      return css`
        display: block;
      `;
    default:
      return css`
        display: block;
      `;
  }
};

export default switchBreak

この関数の使い方はこんな感じ。

SomeComponent.js
/** @jsx jsx */
// eslint-disable-next-line
import React from "react";
import { jsx } from "@emotion/core";
import styles from "src/components/Hero/styles";
import switchBreak from 'src/components/styleUtilMethods/switchBreak'

import Button from 'src/components/Hero/Button'

const Hero = () => (
  <>
    <h3 css={styles.body}>
      JavaScript は
      <br css={switchBreak("sp")} />
      最強の
      <br css={switchBreak("pc")} />
      プログラミング言語
      <br css={switchBreak("both")} />
      っぽい
    </h3>
    <Button/>
  </>
);

export default Hero;

さらに組み合わせるなら

配列を使ってあげればいい。なお配列の後半が優先される。

組み合わせるなら
const Hero = () => (
  <>
    <h3 css={styles.body}>
      JavaScript は
      <br css={[switchBreak("sp"), styles.body]} />
      最強の
      <br css={switchBreak("pc")} />
      プログラミング言語
      <br css={switchBreak("both")} />
      っぽい
    </h3>
  </>
);

export default Hero;