目錄

Ant Design的介紹與使用

安裝與使用

自定義主題

---

Ant Design的介紹與使用

Ant Design是阿里螞蟻金服團隊基于React開發的ui組件,主要用于中后臺系統的使用。其官方網址為：官方網址 。以下可以看到antd的特性與介紹，可以看出antd的生態已經很完善了，可以說大部分的公司的項目都能找到使用antd的影子。

博主撰寫此文時，antd已經更新5版本，如果是初次使用的新手可以點擊網站導航區的研發選項，了解一下里面的對antd這個組件庫的安裝以及一些進階技能的使用：

安裝與使用

安裝步驟如下，npm或yarn安裝都可以。

編譯器終端執行命令安裝即可，完成之后，點擊網頁的組件選擇，然后隨便找個組件試著引用一下，如下：

import React, { Component } from 'react' import { Button } from 'antd'; export default class App extends Component {render() {return (<div><Button type="primary">Primary Button</Button><Button>Default Button</Button><Button type="dashed">Dashed Button</Button><Button type="text">Text Button</Button><Button type="link">Link Button</Button></div>)} }

如果你當初下載的antd是低版本的，需要還需要單獨引入樣式，當然現在的5版本是不需要的，如下：

import 'antd/dist/antd.css'

如果想更改組件的樣式，可以參考每個組件下的API，里面詳細介紹了各種樣式的引用：

舉個例子，如果想使用Icon圖標，可以點擊相關組件，查看其代碼演示然后進行使用，如下：

antd為了減少代碼的負重，將有的組件樣式單獨抽離出來，如果想使用需單獨引用：

import React, { Component } from 'react' import { Button } from 'antd'; import {HomeOutlined,LoadingOutlined,SettingFilled,SmileOutlined,SyncOutlined, } from '@ant-design/icons'; export default class App extends Component {render() {return (<div><Button type="primary">Primary Button</Button><Button>Default Button</Button><Button type="dashed">Dashed Button</Button><Button type="text">Text Button</Button><Button type="link">Link Button</Button><HomeOutlined /><SettingFilled /><SmileOutlined /><SyncOutlined spin /><SmileOutlined rotate={180} /><LoadingOutlined /></div>)} }

自定義主題

在 5.0 版本的 Ant Design 中，提供了一套全新的定制主題方案。不同于 4.x 版本的 less 和 CSS 變量，有了 CSS-in-JS 的加持后，動態主題的能力也得到了加強。

通過以下代碼進行是否引入主題的介紹 ：

import React, { Component } from 'react' import { Button,ConfigProvider } from 'antd'; export default class App extends Component {render() {return (<div><ConfigProvidertheme={{token: {colorPrimary: '#008c8c',},}}>{/* 引入主題 */}<Button type="primary">Primary Button</Button></ConfigProvider><hr />{/* 原主題 */}<Button type="primary">Primary Button</Button></div>)} }

antd還有一些其它好玩的組件，這里就不在過多講解，你可以自行探索，本文不在討論。當然如果你還想了解一些其它組件庫的使用，推薦看一下我之前的文章：基于Vue的UI組件庫

總結

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

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