Gatsbyのチュートリアルを試してみた style編

11314 ワード
gatsby emotion JavaScript JavaScript テキストリンク

はじめに

前回に引き続きgatsbyのチュートリアルを試してみた話を書こうと思います
今回はスタイリングについてです
・・・netlifyへのデプロイは特に問題も無くスイスイできたので記事にするのはやめました

Gatsbyチュートリアル

環境

MacBook Pro 2018
macOS Mojave 10.14.5
node.js v12.18.3
Gatsby 2.12.95
react 16.13.1

目次

1.グローバルスタイル
2.コンポーネントスコープ

グローバルスタイル

gatsbyでcssを全体に適用する場合は任意のディレクトリにcssファイルを配置し
プロジェクトのルートディレクトリにgatsby-browser.jsを作成します

gatsby-browser.js  
src
└── styles
    └── global.css

こんな感じ
そしてgatsby-browser.jsのなかでcssをインポートします

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

これだけで各コンポーネントへcssが適用されます

コンポーネントスコープ

スタイルをコンポーネント単位で適用する場合はcssモジュールを使用します

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

この中にあるxxx.module.cssのファイルがcssモジュールとなり、
各コンポーネントからインポートして使用します

container.module.css
.container {
    margin: 3rem auto;
    max-width: 600px;
}
container.js
import React from "react"
import conainerStyles from "./container.module.css"

export default function Container({ children }) {
    return <div className={conainerStyles.container}>{children}</div>
}
about-css-module.js
import React from "react"
import Container from "../components/container"

export default function About(){
    return(
        <Container>
            <h1>Hello Style</h1>
        </Container>
    )
}

cssモジュールを使用した場合自動でユニークなクラス名を生成してくれるため
衝突を気にせず使用することができるらしいです

またcssコンポーネント以外にCSS-in-JSが使えるようです
今回はEmotionを試してみます

まず下記でgatsby用のemotionモジュールをインストールします

$ npm install gatsby-plugin-emotion @emotion/core @emotion/styled

そしてプロジェクトのルートディレクトリにあるgatsby-config.jsを編集し下記を追加します

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

複数のプラグインを使用している場合はこんな感じ

gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
    `gatsby-plugin-emotion`,
  ],
}

これでEmotionを使用する準備はできたのでJSXにこんな感じでスタイルを記載していきます

index.js
import React from "react"
import Layout from "../components/layout"
import styled from "@emotion/styled"
/** @jsx jsx */
import { css, jsx } from '@emotion/core'

const style = css`
  color: red;
`
const HeaderStyle = styled.h1`
  color: blue;
  &:hover {
    color: red;
  }
`
export default function Home() {
  return (
    <Layout>
      <HeaderStyle>test a </HeaderStyle>
      <h1 css={style}>Hi! I'm building a fake Gatsby site as part of a tutorial!</h1>
      <p>
        What do I like to do? Lots of course but definitely enjoy building
        websites.
      </p>
    </Layout>
  )
}

emotion/coreを使用するとcssを変数などに格納することができます
そして使用したい部分で展開すればcssを適用することができます

emotion/styledを使用するとスタイルを持ったコンポーネントを作成できます
上の例だとstyled.h1でh1タグに相当するコンポーネントを作成し
その中にスタイルを記載しています

ここでちょっとハマったのがコンポーネントの名前をheaderStyleのような
キャメルケースにしてしまった場合は組み込みコンポーネントと解釈されて
自分で定義したコンポーネントが使用されない状態となります
Reactの基本なのに一瞬忘れててスタイルが反映されず焦りました

またstyledの方は下記のようにプロパティも受け取ることができます

index.js
const HeaderStyle = styled.h1`
  color: blue;
  background-color: ${ props => props.dark ? 'black' : 'white'};
  &:hover {
    color: red;
  }
`
export default function Home() {
  return (
    <Layout>
      <HeaderStyle dark>test a </HeaderStyle>

書いていて思ったのはvscodeのintellisenseが効かないのでプラグインを探さないと
ちょっと効率が悪い気がしました

今回のスタイルについてはここまでにします
まだまだチュートリアルは続くので引き続き進めていこうと思います

OSGのMFCマルチウィンドウでの使用
PHPページ間パラメータ伝達の4つの方法