当前位置: 首页 > news >正文

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配置中添加配置:

{
  "plugins": [
    ["import", { "libraryName": "antd", "style": true }]
  ]
}

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

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提供的所有组件了:

import 'antd/dist/antd.css' // 引入antd样式

相关文章:

  • 超图打开不同格式的dem文件
  • Navicat 干货 | 通过检查约束确保 PostgreSQL 的数据完整性
  • Python位操作指南:从基础到应用
  • 【黑马头条】-day04自媒体文章审核-阿里云接口-敏感词分析DFA-图像识别OCR-异步调用MQ
  • 新能源充电桩站场AI视频智能分析烟火检测方案及技术特点分析
  • ctf题目
  • 【C++】C到C++的入门知识
  • Lua热更新(xlua)
  • 解锁背包问题:C++实现指南
  • pytorch中torch.stack()用法虽简单,但不好理解
  • Vue3中如何挂载全局属性
  • 基于Python的电商特产数据可视化分析与推荐系统
  • debian12,linux-image-6.6.13+bpo-amd64内核nvidia显卡驱动失效
  • Uibot6.0 (RPA财务机器人师资培训第4天 )批量开票机器人案例实战
  • XUbuntu22.04之激活Linux最新Typora版本(二百二十五)
  • 一些基本类上实用的注解及例子
  • 鸿蒙手机cordova-plugin-camera不能拍照和图片不显示问题
  • 给web开发零基础小白的简明入门教程
  • Go语言HTTP服务实现GET和POST请求的同时支持
  • 【EasyExcel】多sheet、追加列
  • 广东缉捕1名象牙走私潜逃非洲“红通”逃犯
  • 新华每日电讯:博物馆正以可亲可近替代“高冷范儿”
  • 芬兰直升机相撞坠毁事故中五名人员全部遇难
  • 著名心血管病学专家李国庆教授逝世,享年63岁
  • 一船明月过沧州:为何这座城敢称“文武双全”?
  • 特朗普中东行:“能源换科技”背后的权力博弈|907编辑部