antd的简单使用(主要参考官网文档)

fire_zero

于 2020-05-04 09:24:53 发布

阅读量3.9k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 antd

本文链接：https://blog.youkuaiyun.com/fire_zero/article/details/105913032

前端同时被 2 个专栏收录

11 篇文章

订阅专栏

antd

1 篇文章

订阅专栏

本文档介绍了如何在项目中快速接入antd库，包括安装、使用以及如何进行按需加载和自定义主题设置。首先，详细说明了antd的安装和在组件中引入的方式。接着，重点讲述了优化步骤，如配置按需引入以减少应用体积，以及如何通过config-overrides.js文件进行自定义主题样式的设定，提供了一步步的操作指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

antd的使用

1、添加antd

安装:

yarn add antd

使用:

引入:想在哪个组件用，就在哪个组件引入

import {Button} from 'antd'

引入样式：

import 'antd/dist/antd.css'

2、优化antd,按需引入样式

配置按需引入:

(参考官网的在 create-react-app 中使用文档)
1.切到文档的【高级配置】
2.yarn add react-app-rewired customize-cra
3.修改package.json（看文档）
“scripts”: {
“start”: “react-app-rewired start”,
“build”: “react-app-rewired build”,
“test”: “react-app-rewired test”,
“eject”: “react-scripts eject”
},
4.建立：config-overrides.js(具体内容，参考官网)
5.yarn add babel-plugin-import
6.修改config-overrides.js文件(具体内容，参考官网)
7.删除掉App.js中的antd.css的引入

配置自定义主题样式:

1.切到文档的自定义主题
2.yarn add less less-loader@5(下载5版本的，并按照官网提示操作。6版本可能会报错)
3.修改config-overrides.js，最终版：

const { override, fixBabelImports,addLessLoader } = require('customize-cra');
module.exports = override(
    fixBabelImports('import', {
      libraryName: 'antd',
      libraryDirectory: 'es',
      style: true
    }),
addLessLoader({
    javascriptEnabled: true,
    modifyVars: { '@primary-color': 'red' },
    }),
);