26、react UI 组件库 Ant-design 蚂蚁金服UI组件库-Toy模板网

这篇具有很好参考价值的文章主要介绍了26、react UI 组件库 Ant-design 蚂蚁金服UI组件库。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

react UI 组件库 Ant-design 蚂蚁金服UI组件库

流行的开源 React UI 组件库

material-ui (国外)

官网：https://mui.com/zh/material-ui/getting-started/installation/

这是国外非常流行的 react UI 组件库，但是在国内并不是很常用。

Ant-design UI组件库

官网：https://ant.design/index-cn

这是国内比较流行 react UI 组件库，又蚂蚁金服团队开发。这一篇博客主要来讲解在 react 项目中使用这一套组件库。

Ant-design UI组件库

安装

安装很简单，一句命令完事！

npm install antd --save

基本使用

使用 antd 其实很简单，学习过 vue 的宝子们一定使用过 vue 的 element-ui 组件库，其实是一样的用法。

上一步我们已经完成了 antd 的安装，然后使用的超级简单。

26、react UI 组件库 Ant-design 蚂蚁金服UI组件库
我们暂时不管别的他说啥，我们直接点击组件页面，比如我们需要一个 button 按钮，我们就点击左侧导航菜单，查看一下 Button 按钮部分下的 button 使用方法。

26、react UI 组件库 Ant-design 蚂蚁金服UI组件库

他里面提供了很多按钮供我们使用，我们选择一个和我们系统需要的按钮最相似的使用一下，比如说上图第一个按钮，我们点击下面红色框的图标打开代码：

26、react UI 组件库 Ant-design 蚂蚁金服UI组件库
每一个 ui 组件都需要我们引入，他们都在我们安装的 antd 库里面，引入的方式就是我第一个红色框标识的方式，然后直接把第一个代码复制过来就可以了。

// 创建外壳组件
import React, { Component } from "react";
// 引入 antd Button 组件
import { Button } from 'antd';

// 创建并暴露APP组件
export default class App extends Component {

  render() {
    return (
      <div>
        <h1>我是𝒆𝒅.</h1> 
        <button>点我呀</button>
        {/* 使用 antd 按钮组件 */}
        <Button type="primary">Primary Button</Button>
      </div>
    )
  }
}

OK，保存查看一下效果。

26、react UI 组件库 Ant-design 蚂蚁金服UI组件库

发现这个按钮没有官网的样式，这是因为官网在使用组件的时候没有说明白，我们引入库之后，还需要引入 antd 组件库的样式：

import 'antd/dist/antd.css'

最后呢，我们再刷新一下页面，就看到我们想用的按钮成功引入进来了。

// 创建外壳组件
import React, { Component } from "react";
import { Button } from 'antd';
import 'antd/dist/antd.css'

// 创建并暴露APP组件
export default class App extends Component {

  render() {
    return (
      <div>
        <h1>我是𝒆𝒅.</h1> 
        <button>点我呀</button>
        <Button type="primary">Primary Button</Button>
      </div>
    )
  }
}

26、react UI 组件库 Ant-design 蚂蚁金服UI组件库
好了，这就是我们这个 antd 组件库的基本使用。

其实呢，我们看的话，antd 给我们提供了很多的组件，我们只需要按照她的文档会用就可以，没有必要背过。

我们看到哈，在每页组件右侧菜单的最后面，都有一个 Api 的菜单项，我们点击，就可以前往最后查看这个类型的组件具体的配置参数和回调方法等信息。

antd 很适合用来实现经典的后台管理系统页面。

【本部分相关代码资料】：我是𝒆𝒅. 的 gitee文章来源地址https://www.toymoban.com/news/detail-476404.html

antd的按需引入+自定主题

安装依赖：npm i react-app-rewired customize-cra babel-plugin-import less less-loader
修改package.json

"scripts": {
	"start": "react-app-rewired start",
	"build": "react-app-rewired build",
	"test": "react-app-rewired test",
	"eject": "react-scripts eject"
},

根目录下创建config-overrides.js

//配置具体的修改规则
const { override, fixBabelImports,addLessLoader} = require('customize-cra');
module.exports = override(
	fixBabelImports('import', {
		libraryName: 'antd',
		libraryDirectory: 'es',
		style: true,
	}),
	addLessLoader({
		lessOptions:{
			javascriptEnabled: true,
			modifyVars: { '@primary-color': 'green' },
		}
	}),
);