image.png

antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

特性

  • 🌈 提炼自企业级中后台产品的交互语言和视觉风格。
  • 📦 开箱即用的高质量 React 组件。
  • 🛡 使用 TypeScript 开发，提供完整的类型定义文件。
  • ⚙️ 全链路开发和设计工具体系。
  • 🌍 数十个国际化语言支持。
  • 🎨 深入每个细节的主题定制能力。

官网    GitHub

安装与使用

1
2
npm install antd
yarn add antd

Demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import React, { Component } from 'react'
import { Button, DatePicker } from 'antd'
import { QqOutlined } from '@ant-design/icons'
import 'antd/dist/antd.css'

const {RangePicker} = DatePicker


export default class App extends Component {

    render() {
        return (
            <div>
                App....
                <Button type="primary">Primary Button</Button>
                <Button icon={<QqOutlined />}>Primary Button</Button>
                <button>点击！</button>
                <QqOutlined />
                <DatePicker />
                <RangePicker />
            </div>
        )
    }
}

image.png

样式的按需引入

官方文档

安装依赖：

1
npm i craco babel-plugin-import

如果报错则添加后缀--legacy-peer-deps

修改package.json如下：

1
2
3
4
5
6
"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject"
},

在项目根目录创建craco.config.js，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* craco.config.js */
module.exports = {
    babel: {
        plugins: [
            [
                'import',
                {
                    libraryName: 'antd',
                    libraryDirectory: 'es',
                    style: 'css',
                }
            ]
        ]
    }
}

即可实现antd4的按需引入

自定义主题

安装依赖：

1
npm i craco-less

在src/下创建App.less，引用less文件：

1
@import '~antd/dist/antd.less';

在App.jsx中引入样式：import './App.less'

修改craco.config.js如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/* craco.config.js */
const CracoLessPlugin = require('craco-less')

module.exports = {
    plugins: [
        {
            plugin: CracoLessPlugin,
            options: {
                lessLoaderOptions: {
                    lessOptions: {
                        modifyVars: { '@primary-color': '#1DA57A' },
                        javascriptEnabled: true
                    }
                }
            }
        }
    ],
    babel: {
        plugins: [
            [
                'import',
                {
                    libraryName: 'antd',
                    libraryDirectory: 'es',
                    style: true
                }
            ]
        ]
    }
}

完成自定义主题的配置：

image.png