React中使用Ant Design Mobile组件库

Ant Design https://ant.design/index-cn 是蚂蚁金服团队开发的一套组件库

Ant Design组件库的特点

• 完美适用于 vue react angular三大框架的组件库
• 当今最流行的组件库

Ant Design 的使用

在官网底部找到为react专门使用的那一套—- Ant Design Mobile

• 1.先生产安装Ant Design

yarn add antd-mobile

• 解决react使用ant design的坑

项目根目录建立config-overrides.js来覆盖webpack,或者yarn eject进行抽离,我这里用第一种

先开发环境安装着两个依赖

yarn add react-app-rewired customize-cra -D
yarn add babel-plugin-import -D

config-overrides.js 文件配置

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

根目录引入css

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

App.js文件里测试

import { Button } from 'antd-mobile'

function App() {
  return (
    <div className="App">
      <Button type="primary">primary</Button>
    </div>
  );
}

完美解决