GatsbyウェブサイトをCSS-in-JSでデザインする

個人的にCSSってすごく読みにくいんですよね。

そんな時にはCSS-in-JSを使うことで、スタイルのコンポーネントを新しく作成することで、ちょっと読みやすくすることができます。

作成したコンポーネントをインポートすれば、他のページでも同じようなデザインができるようにもなって便利です。

CSS-in-JSライブラリであるEmotionを使う

まずは必要なパッケージのインストールから始めます。

npm install gatsby-plugin-emotion @emotion/react @emotion/styled

続いてgatsby-config.jsにプラグインを追加して、使えるようにします。

plugins: [
   "gatsby-plugin-emotion",
   ...

あとは、各ページのデザインで、これらを使っていきます。

src/pagesにemotion.jsを作成し、Emotionを利用したページを作成します。

import * as React from 'react'
import Layout from '../components/layout'

import styled from "@emotion/styled"

const Headline = styled.h1`
   font-size: 2.5rem;
   background: lightpink;
   text-align: center;
`
const EmotionPage = () => {
 return (
   <Layout pageTitle="Emotion Page">
     <Headline>ヘッドラインはこうなります</Headline>
   </Layout>
 )
}
export default EmotionPage

最初にimport styled from "@emotion/styled"でstyledを使えるようにします。

そしてスタイルしたコンポーネントに名前(Headline)をつけて、styled.{htmlのタグ}などでcssの内容を定義していきます。

注意点としては、コンポーネントにスタイルを追加する場合は、styled(Link)のように丸括弧()で囲むようにします。

import {Link} from "gatsby"

const StyledLink = styled(Link)`
   font-size: 0.8rem;
   text-decoration: underline;
   color: blue;
`

これでコンポーネントが作成されたので、あとはページの中で使うだけです。上記のコードを実装して、ローカル開発環境を起動してみましょう。

以下のように、Headlineを使うことで、文字が大きくなり背景がピンク色になりました。

実装結果

Tutorial:Emotion Page | 好かれるマーケティング研究室

TailwindCSSを使うためにtwin.macroを使う

TailwindCSSを一緒に使いたい場合は、twin.macroとtailwindcssを追加でインストールします。emotionも必要になるので一緒にインストールします。

npm install twin.macro tailwindcss @emotion/react @emotion/styled gatsby-plugin-emotion

まだgatsby-config.jsにgatsby-plugin-emotionを追加していない場合は、追加しておきます。

  plugins: [
   "gatsby-plugin-emotion",

後はtwとstyledをtwin.macroからインポートして利用します。

使い方はemotionとほとんど変わりませんが、tailwindCSSのクラスを利用する場合は以下のようにtwを利用して書きます。

tailwindCSSのドキュメンテーションは以下にあります。

Documentation - Tailwind CSS

import tw, { styled } from "twin.macro"

const Button = styled.button`
 ${tw`bg-blue-500 hover:bg-blue-800 text-white p-2 rounded`}
`

マウスカーソルをあてると、色が変わるボタンをtailwindCSSを利用して作成できました。

実装結果

Tutorial:Twin Page | 好かれるマーケティング研究室

ブログ記事のMDXファイルをデザインする

以下の記事までに作成したブログ記事を利用します。

MDXファイルで作成しているブログ記事を、デザインしたいこともあると思います。そんなときはMDXProviderを利用します。src/pages/blogs/{mdx.slug}.jsに以下を追加します。

# src/pages/blogs/{mdx.slug}.js

import { MDXProvider } from "@mdx-js/react"

...中略...

まずはemotionやtwin.macroでデザインを作成します。とりあえず今回は、先ほど作成したHeadlineをそのまま使います。

# src/pages/blogs/{mdx.slug}.js

...中略...

import { styled } from "twin.macro"

const Headline = styled.h1`
   font-size: 2.5rem;
   text-align: center;
   background: lightpink;
 `
 
...中略...

続いて作成したコンポーネントを、MDXProviderに渡してMDXRendererを囲みます。

# src/pages/blogs/{mdx.slug}.js

...中略...

<MDXProvider components={{Headline}}>
    <MDXRenderer>
        {data.mdx.body}
    </MDXRenderer>
</MDXProvider>

...中略...​

最後にブログ記事のMDXファイル内でこのコンポーネントを利用します。

# blogs/blog6.mdx

---
title: "RとPythonでデータ分析"
date: "2021-10-24"
category: "データ分析"
---

<Headline>RとPythonでデータ分析</Headline>
RとPythonの良いところを組み合わせて分析するよ！

これを実際に表示して見ると、以下のようになります。HeadlineのCSSが反映されていますね。

MDXファイルの中身のデザインがちゃんと変更されました。

実装結果

RとPythonでデータ分析 | 好かれるマーケティング研究室

まとめ

Gatsbyのデザインを作成するには、CSSよりCSS-in-JSを使った方が色々と便利です。個人的にはこっちの方がCSSのクラスがたくさん並んでいるよりみやすくなっています。

ここまで読んでいただけたなら、”スキ”ボタンを押していただけると励みになります！(*´ー｀*)ﾜｸﾜｸ