《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的 antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

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

使用 npm 或 yarn 安装

$ npm install antd --save

$ yarn add antd

浏览器引入

在浏览器中使用 script 和 link 标签直接引入文件，并使用全局变量 antd。

我们在 npm 发布包内的 antd/dist 目录下提供了 antd.js antd.css 以及 antd.min.js antd.min.css。

示例：

import { DatePicker } from 'antd';ReactDOM.render(<DatePicker />, mountNode);

引入样式：

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

第一个例子

这是一个最简单的 Ant Design 组件的在线 codesandbox 演示。

1. 创建一个 codesandbox

访问 创建一个 codesandbox 的在线示例，别忘了保存以创建一个新的实例。

2. 使用组件

直接用下面的代码替换 index.js 的内容，用 React 的方式直接使用 antd 组件。

import React, { useState } from 'react';import { render } from 'react-dom';import { ConfigProvider, DatePicker, message } from 'antd';// 由于 antd 组件的默认文案是英文，所以需要修改为中文import zhCN from 'antd/lib/locale/zh_CN';import moment from 'moment';import 'moment/locale/zh-cn';import 'antd/dist/antd.css';import './index.css';moment.locale('zh-cn');const App = () => {  const [date, setDate] = useState(null);  const handleChange = value => {    message.info(`您选择的日期是: ${value ? value.format('YYYY年MM月DD日') : '未选择'}`);    setDate(value);  };  return (    <ConfigProvider locale={zhCN}>      <div style={{ width: 400, margin: '100px auto' }}>        <DatePicker onChange={handleChange} />        <div style={{ marginTop: 16 }}>          当前日期：{date ? date.format('YYYY年MM月DD日') : '未选择'}        </div>      </div>    </ConfigProvider>  );};render(<App />, document.getElementById('root'));

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); // 浮层阴影

官方主题

更多内容：