GatsbyJSにEmotionを導入する

2019.6.8

Emotionとは

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

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

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

インストールします。

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

gatsby-config.jsのpluginsにgatsby-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>