React中使用antDesign框架

1.在React项目中使用Ant Design,首先需要安装Ant Design:

npm install antd --save

2.按需引入Ant Design组件,以减小最终打包的大小。使用babel-plugin-import插件可以实现按需加载。首先安装插件:

npm install babel-plugin-import --save-dev

3.在.babelrc或babel配置中添加配置:

javascript 复制代码
{
  "plugins": [
    ["import", { "libraryName": "antd", "style": true }]
  ]
}

4.在React组件中这样使用Ant Design组件:

javascript 复制代码
import React from 'react'
import { Button } from 'antd'

const App = () => {
    <div>
        <Button type="primary">Click me</Button>
    </div>
}

export default App

5.引入整个Ant Design库及样式,如下,然后就可以在组件中直接使用Ant Design提供的所有组件了:

javascript 复制代码
import 'antd/dist/antd.css' // 引入antd样式
相关推荐
DevOpenClub1 分钟前
PDF 多格式解析如何避免混用输出:TEXT、HTML、XML 与 TAG 数据契约
xml·前端·数据库·pdf·html
meilindehuzi_a8 分钟前
从域名到数据库:React + Node.js 项目部署全流程与用户访问链路
数据库·react.js·node.js
用户252632753479 分钟前
请问同一台服务器能同时部署前后端项目并支持https吗?
前端
小凯在掘金20 分钟前
类型判断什么时候用 typeof?
javascript
Sincerelyplz23 分钟前
【Pipecat】基于Pipecat的voice agent实践
前端·后端·agent
lerhxx26 分钟前
为什么你的Three.js物体总是乱转?一文彻底搞懂“万向锁”与四元数
前端·three.js
幸运小圣29 分钟前
JavaScript 关键字与保留字学习笔记详细讲解,一篇get ✅【JavaScript查缺补漏】
javascript·笔记·学习
计算机魔术师36 分钟前
写了代码还要人修?Google 的 AI 编程助手自己打补丁了
前端
DevOpenClub1 小时前
Markdown、HTML 和 PPT 如何稳定交付:文档转换任务的幂等发布流程
开发语言·前端·c#·html·powerpoint
DevOpenClub2 小时前
网页证据如何长期复核:快照、静态 HTML 与 PDF 归档链路
前端·pdf·html