今天同事问我一个问题，说他搭的ant项目样式错乱。我去看了一下，愣是看了半天没发现问题原因。最终后来才发现是Ant Design组件配置的问题。我不得不在这里吐槽一下And Design这篇文档https://mobile.ant.design/docs/react/introduce-cn，写的真不怎么样，关键地方不讲，我一个工作几年的人第一次看都有点蒙。
当前时间是：2020年11月04日。不排除是因为react手脚架更新导致配置发生变化了，对应文档没来急更新。我几个月前搭过一个使用Ant 组件的react项目，当时感觉没花多少时间，很简单。今天就把全新搭建过程记录下来，方便新手入门。
吐槽完了 ，舒服多了，现在就开始吧。
命令行中执行下面命令创建项目。
npx create-react-app ant-demo这个过程有点久，我电脑需要2到5分钟左右。
显示这样就创建成功啦。
npm install antd-mobile --save安装没什么好说的，执行一下就好了。
public/index.html的头部加入以下内容：
<!-- set `maximum-scale` for some compatibility issues -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
<script>
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
if(!window.Promise) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
}
</script>
修改以后的完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<!-- set `maximum-scale` for some compatibility issues -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
<script>
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
if(!window.Promise) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
}
</script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
重点来了，官方文档就是这里写的不太清楚，对新手不友好。
先安装下面已的组件。
npm install react-app-rewired customize-cra babel-plugin-import此配置文件录入以下内容：
const {override, fixBabelImports} = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd-mobile',
style: 'css',
}),
);
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react--app-rewired test",
"eject": "react-scripts eject"
},
至此配置完成啦！！！
修改App.js为以下内容
import { Button, WhiteSpace, WingBlank } from 'antd-mobile';
import React from "react";
function App() {
return (
<WingBlank>
<Button>default</Button><WhiteSpace />
<Button disabled>default disabled</Button><WhiteSpace />
<Button type="primary">primary</Button><WhiteSpace />
<Button type="primary" disabled>primary disabled</Button><WhiteSpace />
<Button type="warning">warning</Button><WhiteSpace />
<Button type="warning" disabled>warning disabled</Button><WhiteSpace />
<Button loading>loading button</Button><WhiteSpace />
<Button icon="check-circle-o">with icon</Button><WhiteSpace />
<Button icon={<img src="https://gw.alipayobjects.com/zos/rmsportal/jBfVSpDwPbitsABtDDlB.svg" alt="" />}>with custom icon</Button><WhiteSpace />
<Button icon="check-circle-o" inline size="small" style={{ marginRight: '4px' }}>with icon and inline</Button>
<Button icon="check-circle-o" inline size="small">with icon and inline</Button>
<WhiteSpace />
{/* <Button activeStyle={false}>无点击反馈</Button><WhiteSpace /> */}
{/* <Button activeStyle={{ backgroundColor: 'red' }}>custom feedback style</Button><WhiteSpace /> */}
<WhiteSpace />
<Button type="primary" inline style={{ marginRight: '4px' }}>inline primary</Button>
{/* use `am-button-borderfix`. because Multiple buttons inline arranged, the last one border-right may not display */}
<Button type="ghost" inline style={{ marginRight: '4px' }} className="am-button-borderfix">inline ghost</Button>
<WhiteSpace />
<Button type="primary" inline size="small" style={{ marginRight: '4px' }}>primary</Button>
<Button type="primary" inline size="small" disabled>primary disabled</Button>
<WhiteSpace />
<Button type="ghost" inline size="small" style={{ marginRight: '4px' }}>ghost</Button>
{/* use `am-button-borderfix`. because Multiple buttons inline arranged, the last one border-right may not display */}
<Button type="ghost" inline size="small" className="am-button-borderfix" disabled>ghost disabled</Button>
</WingBlank>
);
}
export default App;
完美解决了
源码下载（我配置的这套）：
https://download.csdn.net/download/lxyoucan/13087671