Ant Design (Antd)

Ant Design (Antd) 是一个企业级 UI 设计语言和 React 组件库，由蚂蚁金服全新设计体系 Fusion 创造而来，致力于提供给开发者「每个人都可以愉快地开发应用」的设计体验。

Antd 是基于 React 框架开发的组件库，提供了非常丰富的 UI 组件，包括表单、表格、弹窗、图表、布局等等。它本质上是一套样式和组件库，可以帮助开发者快速开发出高质量的 UI 界面。

Antd 的特点有以下几点：

• 走得近，最新技术栈的最佳实践：在设计和开发过程中，Antd 只使用了 React 的最新特性，例如 Hooks，Function Component 等。Antd 同时也逐步支持 TypeScript 和 BrowserRouter 等最新技术栈的最佳实践。
• 开箱即用，并具有强大的可访问性：Antd 提供了丰富的样式和组件，可以轻松地在代码中引入使用。Antd 同时具有良好的可访问性，可以帮助开发者构建更友好的 UI 界面，满足不同用户的需求。
• DIY 界面样式，支持定制主题：Antd 支持自定义主题，可以任意修改样式变量来改变界面的外观和感觉。同时，分享和借鉴主题库也变得很方便。

Antd 组件库非常强大和灵活，可以帮助开发者轻松地构建复杂的 UI 界面。同时，Antd 社区在不断地更新，维护和完善组件库，所以我们可以更加自信地使用它来开发项目。

安装

Antd 可以通过 npm 进行安装，命令如下：

# 使用 npm 安装 Antd
npm install antd --save

使用

在 React 项目中使用 Antd 很简单，只需要按照以下步骤配置即可：

1. 引入样式，一般在 index.js 中引入即可：

   // index.js
   
   // 引入Antd样式
   import 'antd/dist/antd.css'; 
   
   // ...
   

2. 按需引入组件，Antd 提供了基于 babel-plugin-import 按需加载组件的方式，可以有效减小项目打包体积：

   // 引入单个组件，例如 Button：
   import { Button } from 'antd';
   
   // or 引入多个组件：
   import { Button, Icon, Alert } from 'antd';
   

3. 使用组件，例如：

   // Button 示例
   import { Button } from 'antd';
   
   const MyButton = () => {
     return (
       <Button type="primary">Click me</Button>
     );
   };
   

完整的 Antd 组件库可以在 Antd 官方文档 中找到。

自定义主题

在使用 Antd 的过程中，我们经常需要对 UI 样式进行修改，以满足项目需求。这是 Antd 非常强大的一点，它可以通过自定义主题的方式来修改样式变量，从而改变整个组件库的样式。

我们可以通过动态修改 less 变量的方式，例如修改主色（Primary Color）：

@import '~antd/dist/antd.less'; // 引入Antd less变量

// 自定义主题，修改primary color
@primary-color: #1890FF; 

// 重新编译生成css文件
@import '~antd/dist/antd.less';

在项目中使用 Antd 很常见的一种方式是使用 Antd Less主题定制器（Theme Studio），通过调整主题变量，实时生成主题样式文件：