Gatsby Styled Components 사용하기 / 개발 블로그 제작기

Gatby 스타일링 방법은 여러가지가 있는데 그중 Styled Component를 사용하려 한다.

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

gatsby 디렉토리에 설치하고 gatsby-config.js파일에 Styled Component 플러그인을 추가한다.

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

이제 js파일에서 import 하고 원하는 스타일로 꾸미면 되겠다

import React from "react"
import styled from "styled-components"

const Container = styled.div`
  display: flex;
  background-color: white;
`