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

React安装ant design组件库,并使用

ant design是一个很棒的组件库,官方地址:快速上手 - Ant Design

但是如何在React里面用起来,好像并不是很顺畅,没有像Vue里面那么友好,因为我踩过这个坑,虽然安装很简单,但是想要出样式,还是有点步骤的。

安装Antd

npm命令:

npm install antd --save

yarn命令:

yarn add antd

pnpm命令:

pnpm install antd --save

在React中使用

千万不要简单的只看官方的文档,是有问题的,因为里面没有引入css样式,这会导致你即便拷贝了组件代码,但是没有样式

import { Button } from 'antd';
import React from 'react';const App: React.FC = () => (<div className="App"><Button type="primary">Button</Button></div>
);export default App;

接着要引入样式

在跟文件index.js文件里加上:这个要看antd的安装内容里面是不是这个,然后再导入

我用的这种导入方式 

import 'antd/dist/reset.css';

或是在App.css里加上:这个导入我方式我这里报错,所以不推荐

@import '~antd/dist/antd.css';

使用效果

让你以上都是安装好之后,就会有效果了 

 

http://www.lryc.cn/news/109257.html

相关文章:

  • Leetcode | 有效的括号、最长有效括号
  • 思科模拟器配置静态路由(下一跳使用IP)
  • MyBatis -- 执行流程
  • springboot背诵
  • WebGL: 几个入门例子
  • App Cleaner Uninstaller for Mac 苹果电脑软件卸载工具
  • 基于Yolov2深度学习网络的车辆检测算法matlab仿真
  • Java的I/O类库- NIO
  • 【ASP.NET MVC】使用动软(三)(11)
  • 基于MATLAB长时间序列遥感数据植被物候提取与分析
  • K8S deployment 重启的三种方法
  • 解决Linux下PyCharm无法新建文件
  • 规则引擎技术解决方案
  • 2023奇安信天眼设备--面试题
  • 【剑指Offer 58】 左旋转字符串,Java解密。
  • Python SMTP发送邮件
  • Jmeter-获取接口响应头(Response headers)信息进行关联
  • 解密爬虫ip是如何被识别屏蔽的
  • GPIO实验
  • Docker-Compose编排与部署(lnmp实例)
  • Docker 网络模型使用详解 (1)Dockers网络基础
  • 【Spring】(四)Bean 的作用域和生命周期
  • 卷积神经网络【图解CNN】
  • 命令模式 Command Pattern 《游戏设计模式》学习笔记
  • 供水管网漏损监测,24小时保障城市供水安全
  • How to Use Glslang
  • AcWing 24:机器人的运动范围 ← BFS、DFS
  • RF手机天线仿真介绍(一):金属边框天线和LDS天线
  • 动手学深度学习—深度学习计算(层和块、参数管理、自定义层和读写文件)
  • Pytest学习教程_测试报告生成pytest-html(三)