有关AntDesign的简单学习

最新推荐文章于 2024-10-27 22:39:52 发布

gercke

最新推荐文章于 2024-10-27 22:39:52 发布

阅读量3.3k

点赞数 2

分类专栏： react

本文链接：https://blog.csdn.net/gercke/article/details/109480718

版权

本文介绍了AntDesign的基本概念，包括其作为React UI组件库的用途、特点和兼容性。接着，详细阐述了AntDesign的安装步骤，并展示了如何在项目中引入和使用组件。此外，还讲解了如何通过craco配置主题和别名，特别是利用craco-less进行LESS变量覆盖以自定义主题。

摘要由CSDN通过智能技术生成

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

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

AntDesign的兼容性：

使用 npm 或 yarn 安装
npm安装：

npm install antd --save

yarn安装：

yarn add antd

我们需要在index.js中引入全局的Antd样式：

import 'antd/dist/antd.css';

在app.js中使用组件，通过使用antDesign实现

antd 官网 ant.design 有提到：antd 的 JS 代码默认支持基于 ES modules 的 tree shaking，对于 js 部分，直接引入 import { Button } from ‘antd’ 就会有按需加载的效果。

在需要使用哪些的时候进行增加,:例如

yarn add @ant_design/icons
yarn add moment

然后进行导入：

import moment from 'moment';

import {
    Button, DatePicker } from 'antd';
import {
    PoweroffOutlined

关注

专栏目录