create-react-app で Ant Design のコンポーネントをカスタマイズする方法

最近、個人のプロジェクトで React のコンポーネントフレームワークである Ant Design 使ってます。中国発でクオリティが高く、開発も活発なようです。
最近はテック系も中国の存在感すごいですね。
https://ant.design/

↑はウェブ用で、自分が使っているのはモバイル用のこちら。 https://mobile.ant.design/
パッケージが別れているのは、個人的にはちょっと使いづらいところがあるのですが、モバイルにはモバイルのデザインが必要、という考え方なのでしょう。

ちなみに、React Native バージョンもあります。
https://rn.mobile.ant.design/

カスタマイズ

質の高いコンポーネント群ではありますが、カスタマイズせずにそのまま使うってことは、あまりないはず。モックレベルならいいんですけどね。リリースするとなると、どうしてもカスタマイズが必要になる。

Reactのプロジェクトに create-react-app を使っているので、Ant Design 公式のカスタマイズ方法だとうまくいきません。
しばらくハマったので、メモ✍しておきます。

Typescript つかってます。
Typescript / create-react-app / Workbox 等、もろもろセットアップの方法はこちらを参考にしてください。
爆速でウェブアプリを公開する方法(無料でSSL独自ドメイン)

1
2
$ yarn add react-app-rewired
$ yarn add react-app-rewire-less

基本設定とテーマカラーのカスタマイズ

config-override.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const { compose, injectBabelPlugin, getLoader } = require('react-app-rewired');
const { rewireWorkboxGenerate } = require('react-app-rewire-workbox');
const rewireLess = require('react-app-rewire-less');
const tsImportPluginFactory = require('ts-import-plugin');

module.exports = function override(config, env) {

  // For Ant Design Override
  // 1. Rewire Less https://github.com/timarney/react-app-rewired/tree/master/packages/react-app-rewire-less
  // 2. Override variable https://mobile.ant.design/docs/react/customize-theme
  config = rewireLess.withLoaderOptions({
    javascriptEnabled: true,
    modifyVars: {
      'brand-primary': 'red', // Here! :)
    },
  })(config, env);

  // ... other custom config

  return config;
};

個別に変数を上書き

上書き用のファイル

antd-mobile-override.less
1
2
3
4
5
6
7
8
9
10
@import '~antd-mobile/dist/antd-mobile.less';

// You can override antd-mobile variables here
// List of variables:
// https://github.com/ant-design/ant-design-mobile/blob/master/components/style/themes/default.less

@radius-xs: 1 * @hd;
@radius-sm: 2 * @hd;
@radius-md: 12 * @hd;
@radius-lg: 16 * @hd;

メインのスタイルに読み込み

App.less
1
2
3
4
5
@import './antd-mobile-override.less';

.App {
  // your styles here...
}

これで大丈夫なはず。
  

参考

Ant Design

https://mobile.ant.design/docs/react/customize-theme

Ant Design の変数一覧

https://github.com/ant-design/ant-design-mobile/blob/master/components/style/themes/default.less

Ant Desing のカスタマイズ(公式)

https://mobile.ant.design/docs/react/customize-theme

create-react-app

https://github.com/facebook/create-react-app

creat-react-app のカスタマイズ

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc

Lessのrewire

https://github.com/timarney/react-app-rewired/tree/master/packages/react-app-rewire-less

Less のエラー回避

https://stackoverflow.com/questions/46729091/enable-inline-javascript-in-less

何かありましたらコメントをどうぞ

comments powered by Disqus

人気の記事

950 Points チリ出身のギタリストが弾くドラゴンボールZがむちゃくちゃかっこいい…
774 Points Wordpress + Heroku + PostgreSQL + Amazon S3 = ¥0 / 無料でサイト運営
700 Points Rubyのチートシート 変数 / クラス / モジュール
524 Points Rubyのチートシート / アクティブサポート
451 Points 紙のデザイナーがウェブ開発できるようになるまでに必要なこと
435 Points Rails / Google Analyticsのデータを使って分析や管理画面のためのグラフをつくる
323 Points RailsとHerokuでノーティフィケーションをプッシュする / PusherとTurbolinksの兼ね合い
222 Points Rails / RSpec テスト書いたことない メンドクサイ(n´Д`)という時のチートシート
193 Points Rails / Ajaxを使って画面遷移しない一時保存機能をつける
193 Points Protractorでスクレイピングしてみた