Gatsby.jsでstyled-componentsを使う方法

アイキャッチ

こんにちは！Webエンジニアのたけです！

CSS-in-JS便利ですよね〜！React.jsでの開発に欠かせませんね！（特に個人開発だと）最近だとstyled-componentsかemotionが人気なイメージですね。私は以前から、styled-componentsで開発をしていて、慣れているので、今回もstyled-componentsを利用する事にしました！

今回は、Gatsby.jsでstyled-componentsを導入する際に必要な手順を説明していきたいと思います！

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

まず始めに必要なパッケージをインストールしましょう！

npm install --save gatsby-plugin-styled-components styled-components babel-plugin-styled-components

configファイルに記述する

gatsby-config.js

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

初期設定に必要な手順はこれだけです！あとはReact.jsの開発の時と同様にmoduleをimportしてきて利用してください！

// 例
import React from 'react'
import styled from 'styled-components'

const Box = styled.div`
  width: 25vw;
  background-color: ${({ color }) => color};
`

const ColorBox = ({ color, children }) => {
  return <Box color={color}>{children}</Box>
}

export default ColorBox

必要な手順は以上になります！

これで不要なCSSファイルが増えずに済みます！ありがたや〜👏

©️2021 TakeLab