Antd的使用

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

特性

• 提炼自企业级中后台产品的交互语言和视觉风格。
• 开箱即用的高质量 React 组件。
• 使用 TypeScript 构建，提供完整的类型定义文件。
• 全链路开发和设计工具体系。

安装

npm install antd --save

使用

1. 一般引用方式（不推荐）

import Button from 'antd/lib/button'
import 'antd/dist/antd.css'

...
//直接使用组件即可
<Button loading type='primary'>button</Button>
...

如果要引用其他组件需要再添加引用，用起来很不方便

2. 高级引用方式（推荐）

1）安装rewired、cra、babel等支持

react-app-rewired， customize-cra， babel-plugin-import

@babel/plugin-proposal-decorators(官方没说需要安装，但是不安装会报错)

npm install react-app-rewired customize-cra babel-plugin-import -D

npm install @babel/plugin-proposal-decorators -D

修改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

在config-overrides.js加入：

const {override, fixBabelImports} = require('customize-cra')
module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: 'css'
    })
)

2) 添加引用并使用

import {
    Button,
    Spin
} from 'antd'

export default class App extends Component {
    render() {
        return (
            <div>
                app
                <Button loading type='primary'>button</Button>
                <Spin>
                    <div>Test</div>
                </Spin>
            </div>
        )
    }
}

使用less

Antd支持less，但是需要另外安装并配置

1. 安装less和less-laoder

npm isntall less less-loader --save-dev

2. 配置config-overrides.js文件

在config-overrides.js添加对less的支持

const {override, fixBabelImports, addLessLoader} = require('customize-cra')
module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        //将style改为true
        style: true
    }),
    addLessLoader({
        javascriptEnabled: true
    })
)

定制主体

antd 的样式使用了 $\color{blue}{Less}$ 作为开发语言，并定义了一系列全局/组件的样式变量，你可以根据需求进行相应调整。

注：更改主题需要使用less

扫描二维码关注公众号，回复： 9100088 查看本文章

在config-overrides.js的addLessLoader()方法中可以定制主题

const {override, fixBabelImports, addLessLoader} = require('customize-cra')
module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        //将style改为true
        style: true
    }),
    addLessLoader({
        javascriptEnabled: true,
        //在这里修改主题
        modifyVars: {
            '@primary-color': '#F00'
        }
    })
)

但是真正使用的时候会将配置提到外部：

config-overrides.js

const { override, fixBabelImports, addLessLoader } = require('customize-cra')
const theme = require('./theme')
module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        // style:'css',
        style: true
    }),
    addLessLoader({
        javascriptEnabled: true,

        modifyVars: theme
    })
)

theme.js

module.exports = {
    '@primary-color': '#F00'
}

以下是一些最常用的通用变量，所有样式变量可以在 这里(github) 找到。

@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, .45); // 次文本色
@disabled-color : rgba(0, 0, 0, .25); // 失效色
@border-radius-base: 4px; // 组件/浮层圆角
@border-color-base: #d9d9d9; // 边框色
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // 浮层阴影