npm install --save antd，安裝antd。

App.js中引入antd的樣式文件，引入antd的Button組件。

import React, { Component } from 'react' import { Button } from 'antd';// import 'antd/dist/antd.css'; import 'antd/dist/antd.min.css'export default class App extends Component {render() {return (<div><button>點我</button>&nbsp;<Button type="primary">按鈕1</Button>&nbsp;<Button type="default">按鈕2</Button>&nbsp;<Button type="link">按鈕4</Button></div>)} }

導入antd的css文件：antd/dist/antd.css時，npm start 啟動應用時遇到如下警告：
Failed to parse source map: ‘webpack://antd/./components/time-picker/style/index.less’ URL is not supported
所以改用了antd/dist/antd.min.css。

App.js從antd的子庫@ant-design/icons中引入圖標組件，如微信圖標、微博圖標。

import React, { Component } from 'react' import { Button } from 'antd'; import {WechatOutlined,WeiboOutlined} from '@ant-design/icons'import 'antd/dist/antd.min.css'export default class App extends Component {render() {return (<div><button>點我</button>&nbsp;<Button type="primary">按鈕1</Button>&nbsp;<Button type="default">按鈕2</Button>&nbsp;<Button type="link">按鈕4</Button>&nbsp;<WechatOutlined />&nbsp;<WeiboOutlined /></div>)} }

總結

以上是生活随笔為你收集整理的使用UI组件库antd的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。