Home

テーマをカスタマイズしたantdを
gatsbyサイトに適用

update: 2019-04-24

gatsby

antd導入の経緯

公式サイトはこちら
静的なブログにUIコンポーネントフレームワークは不要な気がしなくもないですが、当初問い合わせ画面をリッチにしたくて導入してました。コンポーネントの一覧ページ見てたらページ全体のレイアウト用のものもあったので本ブログでも使ってます。レスポンシブ対応もしているので。

上記導入後、文字がちっさくなったのでdeveloperツールで調べてみたらどうやらantdのcssが悪さをしていることが判明(そりゃそう🤪)。antdのcssはLessで記述されており、ここで文字サイズが定義されていました。どうしたものかと調べてたらなんとかなりました。Less?なにそれ??ってなった方も安心してください。Lessで記述する必要はないです🙆‍♂️

カスタマイズ方法

webpackの設定方法は公式で紹介されています。
Customize Theme
gatsbyではプラグインgatsby-plugin-lessをいれることで実現できます。

dependencies

下記3点インストールしてください。 ※versionは自分が試したときのもの

  • gatsby-plugin-less : "^2.0.12"
  • less : "^3.9.0"
  • less-loader : "^4.1.0""

設定ファイル修正

gatsby-config.js

//...(省略)
 plugins: [
    {
      resolve: 'gatsby-plugin-antd',
      options: {
        style: true
      }
    },
    {
      resolve: `gatsby-plugin-less`,
      options: {
        // 外出しせず直接設定値を書くことも可能
        modifyVars: require(`./src/utils/theme.js`),
        javascriptEnabled: true
      }
    },
]

各設定値をオーバーライドする用のファイル作成
./src/utils/theme.js

module.exports = {
  'font-size-base': '16px',
};

同様にテーマカラー等も好みのものに変更できるので、色々試してみては?
デフォルト値の一覧はGitHubで確認できます。