Gatsby.js + styled-componentsでGlobalCSSを設定する

アイキャッチ

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

前回はGatsby.js で styled-components を導入する手順をまとめました！

今回は導入した styled-components で GlobalCss を設定する手順についてまとめていきたいと思います！

GlobalCSS ファイルの作成

まず、GlobalCSS を記述するファイルを作ります！私の場合はGlobalCss.jsというファイルを作成しました。

以下は私の GlobalCSS の設定となります。

ポイントはcreateGlobalStyle を用いるところです！SSR と共に使う場合はこちらを使います。（Next.js もこれ）

import React from 'react'
import { createGlobalStyle } from 'styled-components'
import reset from 'styled-reset'
import { COLOR } from '../components/shared/CssValues'

const Global = createGlobalStyle`
@import url('https://fonts.googleapis.com/css?family=Caveat');
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
 ${reset}
 body {
    font-family: 'Noto Sans JP', sans-serif;
    letter-spacing: 0.1em;
    line-height: 1.5;
    color: ${COLOR.black}
 }
`
const GlobalCSS = () => {
  return <Global />
}

export default GlobalCSS

ResetCss の設定と web フォントの import をしており、フォント周りの設定もここで行なっています。（この辺りはお好みでどうぞ）

reset-css はこちらのライブラリを使ってます。

npm install --save styled-reset

GlobalCss の設定はサイトに合わせて好みで試してみてください！

あとは、適応させたいページに import してきてコンポーネントを配置するだけです。

作成した GlobalCSS ファイルの適用

コンタクトページに GlobalCSS を適用させた場合以下のようになります。

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

import SEO from '../components/seo'
import GlobalCss from '../components/GlobalCss'
import ContentsWrapper from '../components/atoms/ContentsWrapper'
import ThemeContainer from '../components/atoms/ThemeContainer'
import Header from '../components/organisms/Header'
import Contact from '../components/organisms/Contact'

class ContactPage extends React.Component {
  render() {
    return (
      <div>
        <SEO title="Contact" />
        <GlobalCss />
        <Header />
        <ThemeContainer themeColor={COLOR.lightYellow}>
          <ContentsWrapper>
            <Contact />
          </ContentsWrapper>
        </ThemeContainer>
      </div>
    )
  }
}

export default ContactPage

import してきて配置するだけなので簡単ですね！

基本的に src/pages/___.js のファイルに配置するイメージです。（他にもっと楽な方法があれば教えてください・・）

これで CSS-in-JS の設定はもう大丈夫 （・・なはず）です！

©️2021 TakeLab