GatsbyJSにEmotionを導入する

June 08, 2019

Emotionとは

emotion

CSS in JSのライブラリ一つでJavaScriptの中でCSSも書くことでコンポーネントファイルの中でスタイルも含めて管理しやすくなります。スコープの閉じられることになるのでスタイルが他のDOMに影響を与えることがないのが最大のメリットです。

CSS in JSのライブラリは色々存在していてstyled-componentsが有名どころです。EmotionはObjectとしてスタイルを扱うことができるのが他のライブラリとの大きな違いです。

CSS-in-JSのライブラリとして「emotion」を選択している理由 - Qiita

導入

GatsbyJSへの導入方法はこちらを参考にしました。

Emotion | GatsbyJS

インストールします。

npm install --save gatsby-plugin-emotion @emotion/core @emotion/styled

gatsby-config.jspluginsgatsby-plugin-emotionを追加します。

module.exports = {
  plugins: [`gatsby-plugin-emotion`],
}

コンポーネントのスタイルの設定の方法。今回はTypeScriptで使います。

import { css } from '@emotion/core'

const red = css({
  color: "red"
})

() => <p css={red}>Red Text</p>