Ant Design of React

1.简介

官网地址：Ant Design of React - Ant Design

(1).什么是 Ant Design

• antd：是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。
• 简单点理解: React 版本的 Element UI

(2).Ant Design 特点

• 🌈 提炼自企业级中后台产品的交互语言和视觉风格。
• 📦 开箱即用的高质量 React 组件。
• 🛡 使用 TypeScript 开发，提供完整的类型定义文件。
• ⚙ 全链路开发和设计工具体系(业务战略-用户场景-设计目标-交互体验-用户流程-预期效率等 全方面考虑和分析)。
• 🌍 数十个国际化语言支持。
• 🎨 深入每个细节的主题定制能力。

(3).Ant Design兼容性

• antd@2.0 之后不再支持 IE8
• antd@4.0 之后不再支持 React 15 和 IE9/10

2.基本使用

首先使用 create-app，构建一个 react 项目

npm install -g create-react-app   #安装脚手架工具
create-react-app 项目名称         #创建react项目
cd 项目名称      #进入项目
npm start       #启动项目

(1).安装 antd

npm install antd

(2).导入antd中封装好的组件

• 以 button 按钮组件为例

import { Button } from 'antd';

(3).导入样式

import 'antd/dist/antd.css';

(4).使用组件

由于Button按钮组件中使用到了Icon图标，所以需要提前安装图标

npm install --save @ant-design/icons

App.js

import React from 'react';
import { Button } from 'antd';
// 导入antd样式
import 'antd/dist/antd.css';
// 导入antd图标
import { DownloadOutlined } from '@ant-design/icons';

class App extends React.Component{
    render(){
        let size='large';
        return(
            <>
            {/* 使用Button组件 */}
            <Button type="primary" size={size}>
            Primary
            </Button>
            <Button size={size}>Default</Button>
            <Button type="dashed" size={size}>
            Dashed
            </Button>
            <br />
            <br />
            <br />
            <Button type="primary" icon={<DownloadOutlined />} size={size} />
            <Button type="primary" shape="circle" icon={<DownloadOutlined />} size={size} />
            <Button type="primary" shape="round" icon={<DownloadOutlined />} size={size} />
            <Button type="primary" shape="round" icon={<DownloadOutlined />} size={size}>
            Download
            </Button>
            <Button type="primary" icon={<DownloadOutlined />} size={size}>
            Download
            </Button>
            </>
        )
    }
}

export default App;

index.js

import ReactDOM from 'react-dom';
import React from 'react';
import App from './App';


ReactDOM.render(
    <React.StrictMode>
        <App/>
    </React.StrictMode>
    , document.getElementById('root'));

3.自定义主题

Ant Design 设计规范和技术上支持灵活的样式定制，以满足业务和品牌上多样化的视觉需求，包括但不限于全局样式（主色、圆角、边框）和指定组件的视觉定制。

• antd 默认全局主色为蓝色，那么如何修改全局主色的呢？

官网地址：在 create-react-app 中使用 - Ant Design

(1).安装 craco 

npm install @craco/craco

(2).修改 package.json 里的 scripts 属性

    "start": "craco start",
    "build": "craco build",
    "test": "craco test",

(3).安装 craco-less

npm install craco-less

(4).在项目根目录，创建 craco.config.js 文件，用于修改默认配置

const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

(5).重新导入样式

import 'antd/dist/antd.less';

(6).重新启动项目

npm start

Ant Design 的样式变量：

官网地址：定制主题 - Ant Design

@primary-color: #1890ff; // 全局主色
@link-color: #1890ff; // 链接色
@success-color: #52c41a; // 成功色
@warning-color: #faad14; // 警告色
@error-color: #f5222d; // 错误色
@font-size-base: 14px; // 主字号
@heading-color: rgba(0, 0, 0, 0.85); // 标题色
@text-color: rgba(0, 0, 0, 0.65); // 主文本色
@text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色
@disabled-color: rgba(0, 0, 0, 0.25); // 失效色
@border-radius-base: 2px; // 组件/浮层圆角
@border-color-base: #d9d9d9; // 边框色
@box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
  0 9px 28px 8px rgba(0, 0, 0, 0.05); // 浮层阴影

简单使用：