Gatsby.js で material-ui を使用する際の手順

こんにちは、@ndj です。
現在、Gatsby.js でブログみたいなものを作成しています。
デザインをすべて自前の CSS で作ると、無限に時間がかかってしまうことがこの間判明したので、UIフレームワークとして material-ui を使用することにしました。

いろいろ調べたところ、Gatsby.js で material-ui を使用する際は、単に yarn add @material-ui/core すればよいわけではなさそうなことが分かったので、備忘録的に記事に残しておきます。

結論

• material-ui をインストールする
• gatsby-plugin-material-ui をインストールする
• gatsby-config.js に記述を追加する

material-ui をインストールする

まずは、material-ui をインストールします。

yarn add -D @material-ui/core

gatsby-plugin-material-ui をインストールする

次に、gatsby-plugin-material-ui をインストールする必要があるみたいです。

yarn add -D gatsby-plugin-material-ui

gatsby-config.js に記述を追加する

最後に、gatsby-config.js の plugin に以下のように記述を追加します。

module.exports = {
    plugins: [`gatsby-plugin-material-ui`],
}

以上で、導入は完了です。
最後にテストとして、ヘッダーを作ってみます。

テスト

import React from 'react';
import { AppBar, Toolbar, Typography } from '@material-ui/core';

const Header = () => {
    return (
        <AppBar position="static">
            <Toolbar>
                <Typography>TEST</Typography>
            </Toolbar>
        </AppBar>
    );
}

export default Header;

import React from "react"
import Header from '../components/header';

export default function Home() {
  return (
    <React.Fragment>
      <Header />
    </React.Fragment>
  );
}

できてるっぽいです。
意外と導入簡単だったかもしれない。

参考

GajiLabo++ blog: GatsbyJS でUIフレームワーク Material-UI を使用する

さいごに

閲覧ありがとうございました。
誤字脱字、間違いご指摘などございましたら、コメントでご指摘くださるとありがたいです。
フレームワークってべんり。

twitter: ndj