Gatsby のテンプレートの１つ、gatsby-starter-default をベースに、antd と styled-component を使えるようにします。 以下は gatsby-starter-default の導入は終わっていて、ページが表示できているところからスタート。

antd の導入

antd の他に plugin も導入します。詳しくは公式。 antd のテーマもカスタマイズするため less も追加

gatsby-plugin-antd gatsby-plugin-less

npm install antd gatsby-plugin-antd --save
npm install --save less gatsby-plugin-less

gatsby-config.js に以下を追記します

    {
      resolve: 'gatsby-plugin-antd',
      options: {
        style: true
      }
    },
    {
      resolve: "gatsby-plugin-less",
      options: {
        javascriptEnabled: true,
        modifyVars: {
          "font-family" : `"Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Yu Gothic", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;`,
          "primary-color": `#33A1FD`
        }
      }
    }

中国語のフォントが指定されていると所々漢字の形が変わってしまいますので font-family は指定。font-family の指定は下記を参考にしています。

どの環境でも綺麗なゴシック体、明朝体のフォントを指定す

上の設定は antd の module に対してなので、初期状態である src/components/layout.css といったファイルには影響がありません。font-family 変わっていない？という状態になったら別の css ファイルを疑ってみてください。

styled-components の導入

これも plugin 公式を参考に。

gatsby-plugin-styled-components

npm install --save gatsby-plugin-styled-components styled-components babel-plugin-styled-components

gatsby-config.js に追記

    {
      resolve: `gatsby-plugin-styled-components`,
      options: {
        // Add any options here
      },
    }

これで終了。あとは使いながら必要な設定を足します