GatsbyでMaterial-UIを使う

2021/02/07

デザインセンスがないので,Material-UIを使うことで統一感を出しつつそれなりのデザインにしていくという作戦です。

やること

Material-UI本体のインストール
プラグイン(gatsby-plugin-material-ui)のインストール
プラグイン設定

Material-UIのインストール

まずは,Material-UI自体をインストールしてやる必要があります。
公式ページを参考に下記のコマンドでインストールしていきます。

# npm を使う場合
npm install @material-ui/core

# yarn を使う場合
yarn add @material-ui/core

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

次にGatsbyでMaterial-UIをいい感じに使えるようにしてくれるプラグインを入れていきます。
FOUC,自動プレフィックス,ミニファイを解決してくれます。
Material-UIを使うだけであれば,絶対にインストールしないといけないわけではないみたいです。

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

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

プラグインの設定

先程いれた,gatsby-plugin-material-uiを設定していきます。
と言っても,他のプラグインと同じでgatsby-config.jsのpluginsの項目に追加するだけです。

// gatsby-config.js
module.exports = {
  // ~ (略) ~
  plugins: [
    // ~ (略) ~
    `gatsby-plugin-material-ui`,
    // ~ (略) ~
  ],
}

styled-componentsなど他のスタイリングプロバイダーと一緒に使う場合は上書きできるように<head>タグ内でMaterial-UIの方が他スタイリングプロバイダーよりも上に来ている必要があります。

// gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-material-ui`,
      options: {
        stylesProvider: {
          injectFirst: true,
        },
      },
    },
    `gatsby-plugin-styled-components`,
  ],
};

ベンダー固有のプレフィックス追加やCSSの最小化はデフォルトで適用されています。
オプション設定で,無効にすることもできますがあまりユースケースが思いつかなかったでの割愛します。

ひとこと

これで,Material-UIを使うことができるようになりました！
ちょっとずつカスタマイズしていくぞー！！

それではまた明日。