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 を使用する
さいごに
閲覧ありがとうございました。
誤字脱字、間違いご指摘などございましたら、コメントでご指摘くださるとありがたいです。
フレームワークってべんり。