Ant Design Mobleをcreate-react-app(TypeScript)のプロジェクトで使う

Ant Design Mobileをcreate-react-app(w/ TypeScript)のプロジェクトで使う方法

create-react-appのセットアップに関しては別記事にまとめた

nomusiclife.hatenablog.jp

antd-mobileを追加

$ yarn add antd-mobile

モジュール化されたantd-mobileを利用可能にする

react-app-rewiredでCRAのconfigに変更を加える

$ yarn add -D react-app-rewired react-app-rewire-less ts-import-plugin
$ touch config-overrides.js

config-overrides.js

const { getLoader } = require('react-app-rewired')
const tsImportPluginFactory = require('ts-import-plugin')
const rewireLess = require('react-app-rewire-less')

module.exports = function override(config, env) {
  const tsLoader = getLoader(
    config.module.rules,
    rule =>
      rule.loader &&
      typeof rule.loader === 'string' &&
      rule.loader.includes('ts-loader'),
  )

  tsLoader.options = {
    getCustomTransformers: () => ({
      before: [
        tsImportPluginFactory({
          libraryDirectory: 'lib',
          libraryName: 'antd-mobile',
          style: true,
        }),
      ],
    }),
  }

  config = rewireLess.withLoaderOptions({
    javascriptEnabled: true,
    modifyVars: {}, // https://mobile.ant.design/docs/react/customize-theme
  })(config, env)
  return config
}

react-app-rewiredを有効化するにはnpm scriptsも変更する必要がある

package.json

  "scripts": {
    "start": "react-app-rewired start --scripts-version react-scripts-ts",
    "build": "react-app-rewired build --scripts-version react-scripts-ts",
    "test": "react-app-rewired test --env=jsdom --scripts-version react-scripts-ts",

上記の設定を行うことにより、antd-mobileのからimportするだけでcssも含めてモジュール化されたコンポーネントが利用可能になる

import { Button } from 'antd-mobile'

テーマの変更

Customize Theme - Ant Design

テーマの変更を行う場合は、上で作成したconfig-overrides.jsのmodifyVarsにkey-valueで設定する

以下はプライマリカラーを変更する例

  config = rewireLess.withLoaderOptions({
    javascriptEnabled: true,
    modifyVars: { 'brand-primary': 'red' }, // https://mobile.ant.design/docs/react/customize-theme
  })(config, env)
  return config

設定できる全項目は下記のページから確認できる

github.com