Gatsby触ってみる【スタイリング編】

2021/01/13

前回の続きからGatsbyチュートリアル進めていきます。

2. Introduction to Styling in Gatsby(ギャツビーのスタイリング入門)

Gatsbyにおけるスタイルの設定方法のチュートリアルです。

グローバルのスタイル

グローバルのスタイルを記述するglobal.css作成していきます。
特にフォルダ位置に制約はないようなので任意の場所でいいのですが,今回は下記のようにフォルダを配置します。

├── package.json
├── src
│   └── pages
│       └── index.js
│   └── styles
│       └── global.css

/* global.css */
html {
  background-color: aliceblue;
}

スタイルがあたっているか確認できればいいので,背景色を変えるだけのスタイルです。

次にルート配下にgatsby-browser.jsを作成します。
以下のような構成になります。

├── package.json
├── src
│   └── pages
│       └── index.js
│   └── styles
│       └── global.css
├── gatsby-browser.js

このgatsby-browser.jsはGatsbyBrowserAPIを使ったりするのに必要みたいです。
今の所はファイル名 gatsby-browser.js が重要(違うファイル名ではダメ)ということだけわかっていればいいようです。
gatsby-browser.jsでglobal.cssをインポートします。

// gatsby-browser.js
import "./src/styles/global.css"

インポートの形式はCommonJS(require)でもES Module(import)どちらの構文でも機能します。
特にこだわりがなければES Moduleのimportを使用しておけばいいです。

今回は,チュートリアルなので直接CSSをインポートしていますが,大体の場合はレイアウトコンポーネントにスタイルを適用してレイアウトコンポーネントを使用するようです。
確かにGatsby以外でもグローバルにスタイル当てたいことあまりないですよね(知らないだけかもしれないですけど)。
ブラウザごとの挙動をリセットするためのNormalize.cssやress.cssとかくらいでしょうか？

コンポーネントのスタイル

CSSモジュールを使用します。
コンポーネントごとに*.module.cssというCSSファイルを作成します。
GatsbyにプレーンのCSSではなく,CSSモジュールとして処理する必要があることを伝えるために*.module.cssという形式になっています。
試してみました。
構成はこのような構成です。

├── src
│   └── components
│       └── container.js
│       └── container.module.css
│   └── pages
│       └── index.js

/* container.module.css */
.container {
  margin: 3rem auto;
  max-width: 600px;
}

// container.js
import React from "react"
import containerStyles from "./container.module.css"

console.log(containerStyles)

export default function Container({ children }) {
  return <div className={containerStyles.container}>{children}</div>
}

container.module.cssファイルを開発ツールに出力しています。
結果は以下の通り。

{container: "container-module--container--3C57J"}
container: "container-module--container--3C57J"
__proto__: Object

CSSモジュールを使用するとクラス名にユニークな名前をつけてくれるんですね。

その他

Gatsbyではスタイリングに関してのプラグインが豊富です。
有名どころなCSSフレームワークはだいたいプラグインが提供されているので使えます。
Sassなどもプラグインでサポートされていて使えるみたいです。

Gatsby触ってみる記事一覧

参考ページ

公式チュートリアル

2. Introduction to Styling in Gatsby(ギャツビーのスタイリング入門)

グローバルのスタイル

コンポーネントのスタイル

その他

Gatsby触ってみる 記事一覧

参考ページ

Gatsby触ってみる記事一覧