2019-02-08に更新

GatsbyJSでStyled Componentsを使う

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便利!一長一短ありますが、スコープ効いて名前が長くならないのはいいですね。

Originally published at www.corylog.com

view_list [連載] ブロガー向けGatsby講座
第24回 GatsbyJSでStaticにファイルを置く
第25回 GatsbyJsでWebpackバンドルサイズを確認する
第26回 GatsbyJsでFontを変更するTypeface編
第27回 GatsbyJSでStyled Componentsを使う
第28回 GatsbyJsでSitemapを使う

aocory

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント