GatsbyでMuiThemeを使う

2021/02/08

昨日の続き。

やること

プラグイン(gatsby-theme-material-ui)のインストール
プラグイン設定
テーマの設定

gatsby-theme-material-uiのインストール

Mui(Material-UI)テーマのサポートしてくれたり,GatsbyリンクコンポーネントのMaterial-UI版をサポートしてくれてる。
(Gatsbyリンクコンポーネントは事前に関連リソースをフェッチとかしてくれてる)

# npm を使う場合
npm install gatsby-theme-material-ui


# yarn を使う場合
yarn add gatsby-theme-material-ui

プラグインの設定

先程いれた,gatsby-theme-material-uiを設定していきます。
gatsby-plugin-material-uiと同様にgatsby-config.jsのpluginsの項目に追加するだけです。
※gatsby-theme-material-ui内部でgatsby-plugin-material-uiを使用しているので,両方記述するとビルド時にエラーが発生します。

// gatsby-config.js
module.exports = {
  // ~ (略) ~
  plugins: [
    // ~ (略) ~
    // `gatsby-plugin-material-ui`, ← 使用している場合は消す
    `gatsby-theme-material-ui`,
    // ~ (略) ~
  ],
}

テーマ設定

src配下にgatsby-theme-material-ui-top-layout/theme.jsを作成して,テーマを設定していきます。
ちなみにディレクトリ名はgatsby-theme-material-ui-top-layoutじゃないと自動で判別してくれないみたいです。
先日決めたブログのテーマカラーを設定していきたいと思います。

import { createMuiTheme } from "@material-ui/core";

const theme = createMuiTheme({
    palette: {
      primary: {
        light: '#e6ffff',
        main: '#b3e5fc',
        dark: '#82b3c9',
        contrastText: '#000',
      },
    },
});

export default theme;

これで,ひとまずは設定完了。
Material-UIコンポーネントを使用するときにcolorプロパティにprimaryをいれると適用されます。

<Button color="primary">ボタン</Button>

ひとこと

プラグイン入れたらフォント変わりましたね。
src配下のディレクトリが微妙な感じなので,わざわざプラグインでテーマ読まなくても良いのかなという気も少ししてます。
テーマの読み込みは自作トップレイヤーコンポーネントとかにテーマプロバイダを適用した方が構成はきれいにみえるかなぁ。。。
わかんないなー。試行錯誤してカスタマイズしていく中で決めればいいか。

それではまた明日。