React中Ant Design的使用方法(design的用法及搭配)
什么是Ant Design？
Ant Design是蚂蚁金服体验技术部经过大量的项目实践和总结，沉淀出设计语言 ，这但并不是单纯的设计语言，设计原则、控件规范和视觉尺寸，它还配套有前端代码实现方案。也就是说采用Ant Design后，UI设计和前端界面研发可同步完成，效率大大提升。目前有多家公司例如：阿里、美团、滴滴、简书采用。
Ant Design的官网：ant.design/index-cn\
如何引用Ant Design？
1.首先拥有一个React项目
运用官网的命令创建一个react项目
react.docschina.org/tutorial/tu…
npx create-react-app my-app复制代码
使用这条命令创建一个my-app文件夹， 创建完成后会在当前目录下出现一个my-app的文件夹，进入my-app目录，运行npm run start
cd my-app npm run start复制代码
然后你就可以在浏览器中看到默认的React的页面了
创建完成后的文件效果如下图所示：
2.在项目中安装Ant Design
npm install antd --save复制代码
引入css样式库
修改 src/App.css，在文件顶部引入 antd/dist/antd.css。
import 'antd/dist/antd.css'复制代码
进行代码测试:
效果:
现在我们已经完成了Ant Design的引用
如何使用Ant Design官网中的api
当我们完成综上所述的操作时，你离灵活运用Ant Design就只差最后一步：熟记Api
打开Ant Design的官网
2.点击组件,进入组件菜单页面（这里我们以button按钮为例）
点击左侧的Button选项 点击代码演示的展开代码（如下图所示）
现在你就可以复制代码到你自己的页面中
这样你就完成了Ant Design的引用与使用
作者：孑律
链接：https://juejin.cn/post/7028844531776749581