react 引入antd 样式_引用Ant.Design到React中

参考地址：

http://ant.design/index-cn​ant.design

首先说说ant.design是干啥的，ant.design是基于react开发的一个解放ui和前端的工具，它提供了一致的设计方便我们快速开发和减少不必要的设计与代码，且其在github上的star数也有4万多了。ant.design的目的也在于提高用户、开发者等多方的体验与幸福感。

在React命令行中打开命令行安装：

npm install antd --save

ant.design中有两种引用方式

一.全部引入（引入的东西太多，不太推荐）

在想要的组件页面中引入你想要的前端组件：

import { Button ,Menu,Icon, Input} from 'antd'

在src路径下引入的全局index.js中引入css样式：

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

如果引入有下拉的组件需要引入其中的：const 定义的常量

例：const SubMenu = Menu.SubMenu;

二.按需引入（按自己的需要引入需要的组件和样式），文档中有两种方式，这里只说手动引入的。

组件页面只需要引入这两句话(比如引入button组件)：

import Button from 'antd/lib/button';

import 'antd/lib/button/style';

（如果想引入input组件）：

import Input from 'antd/lib/input';
import 'antd/lib/input/style/css';

其他的const的看需要引入。

内容部分（写一个例子button的）：

在React的render中写：

<div className="App">
<Button type="primary">Primary</Button>
<Button>Default</Button>
<Button type="dashed">Dashed</Button>
<Button type="danger">Danger</Button>

</div>

如果您看到有不对的地方请指出，必定改正。