Chakra UI

Chakra UIはReactのUIライブラリです。
UIライブラリの選定としてMaterial-UIと迷いましたが、UdemyのReact学習で馴染みのあったChakra UIを今回は選びました。

Chakra UIの導入

導入についてはGatsby公式の@chakra-ui/gatsby-pluginを参考にしました。
まずは、プラグインの導入

npm i @chakra-ui/gatsby-plugin @chakra-ui/react @emotion/react @emotion/styled framer-motion

Gatybyの設定ファイルも記述を追加します。
"restCSS"は各々のスタイル状況に応じて変える形になると思います。
自分はある程度、形にした状況でChakra UIを導入したので既存のスタイル崩れ回避の為に"false"にしました。
ただ、あるべきはresetCSSを効かせた状態でChakra UIでスタイルを統一させた方が保守性は高いと思います。

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: "@chakra-ui/gatsby-plugin",
      options: {
        resetCSS: false,
      },
    },
  ],
}

Chakra Templatesにサンプルがたくさんあるので、参考にしてブログに反映させていけたらと思います。