GatsbyJsでStyled-componentを使う

02 07, 2019

Home

Gatsby

GatsbyJsでStyled-componentを使う

GatsbyJSでStyled Componentsを使う

GatsbyJSでCSSモジュールを用いたスタイリングもいいが、CSSinJSで書いたほうが便利そうということでStyled Componentsを使ってみた。

GatsbyJSでStyled Componentsの使い方

インストール
Gatsby-config.jsのセッティング
サンプルコード

Styled Componentsのインストール

npmコマンドでインストールします。

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

Gatsby-config.jsのセッティング

Gatsby Config.jsを以下のようにします。

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

書き直す

index.jsはこのように書き直せます。

import React from 'react'
import { Link } from 'gatsby'
import styled from 'styled-components'

import Layout from '../components/layout'
import Image from '../components/image'

const ImgWrapper = styled.div`
  max-width: 300px;
  margin-bottom: 1.45rem;
`

const IndexPage = () => (
  <Layout>
    <h1>Hi people</h1>
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>
    <ImgWrapper>
      <Image />
    </ImgWrapper>
    <Link to="/page-2/">Go to page 2</Link>
  </Layout>
)

export default IndexPage

header.jsは、このように書き直すことができます。

import React from 'react'
import { Link } from 'gatsby'
import styled from 'styled-components'

const HeaderWrapper = styled.div`
  background: rebeccapurple;
  margin-bottom: 1.45rem;
`

const Headline = styled.div`
  margin: 0 auto;
  max-width: 960;
  padding: 1.45rem 1.0875rem;
  h1 {
    margin: 0;
  }
`

const StyledLink = styled(Link)`
  color: white;
  textdecoration: none;
`

const Header = ({ siteTitle }) => (
  <HeaderWrapper>
    <Headline>
      <h1>
        <StyledLink to="/">{siteTitle}</StyledLink>
      </h1>
    </Headline>
  </HeaderWrapper>
)

export default Header

使ってみた感想

かなりStyled Components便利！一長一短ありますが、スコープ効いて名前が長くならないのはいいですね。

Corylog

GatsbyJS

Python

Books