最近、個人のプロジェクトで 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

Ant Design の変数一覧

Ant Desing のカスタマイズ（公式）

create-react-app

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

Lessのrewire

Less のエラー回避