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

こんにちは、 Gaji-Labo アシスタントエンジニアの石垣です。

今回は、 Gaji-Labo のコーポレートサイトでも採用している React 用 SSG である GatsbyJS 上で、最近案件で採用しているUIフレームワーク Material-UI を使用する方法についてまとめたいと思います。

Material-UI の導入

GatsbyJS 上で Material-UI を使用するには、 gatsby-plugin-material-ui というプラグインが用意されているため、そちらを使用します。

このプラグインは Material-UI の持つスタイリングライブラリを GatsbyJS で使用できるようにするもので、 SSR のサポートに加えて自動 prefix の付与や minify を行います。

GatsbyJS に Material-UI そのものを導入するプラグインではないので、別途 @material-ui/core の導入も必要になります。

$ yarn add -D gatsby-plugin-material-ui @material-ui/core

プラグインを導入した後、 gatsby-config.js 上で読み込みます。

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

単純に GatsbyJS 上で Material-UI を使用するだけであれば、以上で導入は完了です。

Material-UI を使用する

導入した後は以下のように、通常 Material-UI を使う時と全く同じように使用することができます。

import React from 'react';
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
import Container from '@material-ui/core/Container';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';
import { Link } from 'gatsby';

export default function Index() {
  const theme = createMuiTheme({
    ...
  });
  return (
    <ThemeProvider theme={theme}>
      <Container maxWidth="sm">
        <Box my={4}>
          <Typography variant="h4" component="h1" gutterBottom>
            example
          </Typography>
          <Link to="/about">
            Go to the about page
          </Link>
        </Box>
      </Container>
    </ThemeProvider>
  );
}

GatsbyJS のページコンポーネント上に Container, Box, Typography などの Material-UI のコンポーネントを組み込んで使用しています。

勿論 ThemeProvider や makeStyles を使用してのスタイリングを行うことも可能です。

上記の例では createMuiTheme と ThemeProvider を使用してのスタイリングを想定しています。

コンポーネントのスタイリング方法や Material Design の色の使用など、 Material-UI の基本的な使用方法については以前自分のブログで書きましたので、そちらもご覧いただけるとありがたいです。

まとめ

今回は React 用 SSG である GatsbyJS 上で、UIフレームワーク Material-UI を使用する方法についてまとめました。

GatsbyJS などの SSG や UI フレームワークは案件で扱う機会が多く、今後も増えていくと考えています。

そのために、今後も触りながら知見を溜めて社内・社外に共有していきたいと考えています。

Material-UIの実践で得た知見をシリーズ記事として集めてみました。Material-UIの開発に興味がある方、Material-UIをどう使ったらいいかの情報が知りたい方、実践でのポイントを吸収したいと思っている方などにおすすめの内容です。