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样式
相关推荐
如烟花的信页几秒前
易盾滑块逆向分析
javascript·爬虫·python·js逆向
努力早日退休1 分钟前
一个 9999px 引发的跨平台血案:小程序离屏隐藏元素的滚动兼容性问题
前端·javascript
YFF菲菲兔3 分钟前
React 核心流程总述
react.js
嘟嘟071716 分钟前
前端异步编程完全指南:从json-server到DeepSeek大模型接口调用
前端
用户0595401744616 分钟前
大模型多轮对话“失忆”踩坑实录:一次线上事故让我排查了48小时,最终靠 Playwright + Pytest 把记忆锁死
前端·css
橘子星16 分钟前
前端薅数据神器 Fetch:不用翻墙,在线拿捏后端与 AI 接口
前端·后端
Darling噜啦啦16 分钟前
正则表达式实战指南:从手机号验证到模板引擎,5 个案例彻底搞懂 RegExp
javascript·面试
sugar__salt17 分钟前
JS正则表达式与字符串高阶实战精讲
开发语言·javascript·正则表达式
步步为营DotNet18 分钟前
探索.NET 11:Blazor 在跨平台客户端应用开发的进阶实践
前端·asp.net·.net
HjhIron20 分钟前
从手机号校验到模板引擎:正则表达式的实战之旅
javascript