1. Install antd – mobile

yarn add antd-mobile

2. Set the entry page (index.html)

<! DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> < meta name = "viewport" content = "width = device - width and minimum - scale = 1.0, the maximum - scale = 1.0, user - scalable = no" / > React </title> <script SRC ="%PUBLIC_URL%/common/fastclick.js"></script ('addEventListener' in document) { document.addEventListener('DOMContentLoaded',function () { FastClick.attach(document.body) },false) } if (! Window.promise) {//es6-promise.min.js I also put in the local project document.writeln('<script src="%PUBLIC_URL%/common/es6-promise.min.js"'+'>'+'<'+'/'+'script>'); } </script> </head> <body> <div id="root"></div> </body> </html>Copy the code

3. Introduce styles in index.js

import 'antd-mobile/dist/antd-mobile.css'

4. On demand

Install the following dependencies: yarn add react-app-rewired customize-cra babel-plugin-import –dev

After react-app-rewired2.*, injectBabelPlugin is not supported, so customize-cra needs to be installed.

5. Create config-overrides. Js file in the root directory of the project and write the following code:

const { override, fixBabelImports } = require('customize-cra');
module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd-mobile',
        style: 'css',
    }),
);
Copy the code

6. Modify scripts in package.json file:

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build"
  }
Copy the code

7. Used in components:

import { Button } from 'antd-mobile'

You can see the results when you restart the project.