####Ant-Design
Ant-Design是采用React封装了一套 Ant Design 的组件库。更高级的用法可以参考Ant Design。
项目基础
构建项目基础可以参考我的另一篇博客使用React服务端渲染Next.js框架构建一个简单项目在本地新建一个简单的next.js项目。
####安装本地ant-design依赖
D:\>npm install antd --save
D:\>npm run dev //启动服务
安装好ant-design的本地依赖后，使用 npm run dev 启动服务。
这样我们就可以在原有的pages/index.js中引入我们需要的ant-design组件。
import React from 'react';
import {Button} from 'antd';
export default class Index extends React.Component{
constructor(props){
super(props);
}
render(){
return (<div>
<Button type="primary">Ant Design 按钮组件</Button>
<p>Index Page!</p>
</div>)
}
}
实际结果
我们可以看到按钮是出来了，但是样式没有。
####怎样引用到样式文件
我们可以使用Next.js自带的head组件
import React from 'react';
import {Button} from 'antd';
import Head from 'next/head';
class Index extends React.Component{
constructor(props){
super(props);
}
render(){
return (
<div>
<Head>
<link rel='stylesheet' href='https://cdn.bootcss.com/antd/3.1.3/antd.css'/>
</Head>
<Button type='primary'>Ant Design 按钮组件</Button>
<p>Index Page!</p>
</div>
);
}
}
export default Index;
这样样式就引入进来了。
这里注意，Next.js自带的head组件，最终渲染生成的就是HTML中对应的head标签。我们使用的时候不能写成跟HTML中一样的（<head></head>），写成一样的会报错。可以写成Head或者使用别名 例如NextHead都可以。
####如何引入自定义的样式文件
我们在项目目录下新建一个static的文件夹，与pages同层级。Next.js会默认从该文件夹中找对应的静态文件。目录结构如下
-----next-demo
|- - —pages
|- - —index.js
|- - —static
|- - —css
|- - —antd.css
|- - —img
|- - —test.jpg(png|jpeg)
|- - —js
|- - —jquery.js
|- - —package.json
如果新建的存放静态文件的文件夹不是static，我们引用的其中数据会找不到，浏览器控制台会有错误提示（404）。
新建static文件夹之后，这个时候我们就可以在这里存放自己需要的静态文件，在该文件夹下有新建css(样式),js（js库例如jquery）和img(图片)三个文件夹分别存放对应的静态文件。
在css文件夹下新建一个样式文件主要是来控制显示图片的大小。
img{
height:100px;
width:100px;
}
最终代码如下：
import React from 'react';
import {Button} from 'antd';
import REct from 'next/head';
class Index extends React.Component{
constructor(props){
super(props);
}
render(){
return (
<div>
<REct>
<link rel='stylesheet' href='https://cdn.bootcss.com/antd/3.1.3/antd.css'/>
<link rel='stylesheet' href='static/css/common.css'/>
</REct>
<Button type='primary'>Ant Design 按钮组件</Button>
<img src="/static/img/2.jpg"/>
<p>Index Page!</p>
</div>
);
}
}
export default Index;
你可以根据自己的需要选择对应的ant-design组件来构建项目。
如果有写的不对的，或者理解不到位地方，欢迎各位指正。