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';

使用效果

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

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/63503.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

地球人口承载力估计 解析和C++代码

Description 假设地球上的新生资源按恒定速度增长。照此测算&#xff0c;地球上现有资源加上新生资源可供x亿人生活a年&#xff0c;或供y亿人生活b年。 为了能够实现可持续发展&#xff0c;避免资源枯竭&#xff0c;地球最多能够养活多少亿人&#xff1f; Input 一行&#xf…

[数据分析与可视化] Python绘制数据地图4-MovingPandas入门指北

MovingPandas是一个基于Python和GeoPandas的开源地理时空数据处理库&#xff0c;用于处理移动物体的轨迹数据。它提供了一组强大的工具&#xff0c;可以轻松地加载、分析和可视化移动物体的轨迹。通过使用MovingPandas&#xff0c;用户可以轻松地处理和分析移动对象数据&#x…

C语言假期作业 DAY 15

一、选择题 1、有如下代码&#xff0c;则 *(p[0]1) 所代表的数组元素是&#xff08; &#xff09; int a[3][2] {1, 2, 3, 4, 5, 6}, *p[3]; p[0] a[1]; A: a[0][1] B: a[1][0] C: a[1][1] D: a[1][2] 答案解析 正确答案&#xff1a; C p 是一个指针数组&#xff0c; p[0] a…

mysql 数据库引擎介绍

一、数据库引擎 数据库引擎是用于存储、处理和保护数据的核心服务。利用数据库引擎可控制访问权限并快速处理事务&#xff0c;从而满足企业内大多数需要处理大量数据的应用程序的要求。 使用数据库引擎创建用于联机事务处理或联机分析处理数据的关系数据库。这包括创建用于存储…

MQTT协议详解「概念、特性、版本及作用」

MQTT&#xff08;Message Queuing Telemetry Transport&#xff0c;消息队列遥测传输&#xff09;是ISO标准下基于发布/订阅方式的轻量级消息协议。MQTT通常使用TCP / IP&#xff08;传输控制协议/Internet协议&#xff09;作为其传输&#xff0c;但也可以使用其他双向传输。MQ…

elementUi el-radio神奇的:label与label不能设置默认值

问题&#xff1a;最近项目遇到一个奇葩的问题&#xff1a;红框中列表的单选按钮无法根据需求设置默认选中&#xff0c;但是同样是设置开启状态的单选框可以设置默认状态 原因&#xff1a;开始同样是和开启/关闭状态一样也把红框中列表的默认值设置为数字模式&#xff0c;但是由…

《golang设计模式》第一部分·创建型模式-04-工厂方法模式(Factory Method)

文章目录 1 概述2.1 角色2.2 类图 2 代码示例2. 1 设计2.2 代码2.3 类图 3. 简单工厂3.1 角色3.2 类图3.3 代码示例3.3.1 设计3.3.2 代码3.3.3 类图 1 概述 工厂方法类定义产品对象创建接口&#xff0c;但由子类实现具体产品对象的创建。 2.1 角色 Product&#xff08;抽象产…

IDEA强大的VisualGC插件

前言 开发阶段实时监测&#xff0c;自己的JVM信息&#xff0c;实时可视化 Hotspot JVM 垃圾回收监控工具, 支持查看本地和远程JVM进程, 支持G1 and ZGC算法。 插件安装 在线安装 IntelliJ IDEA 可通过在线安装的方式&#xff0c;安装插件 JDK VisualGC&#xff0c;安装步骤: …

SpringBoot运行流程源码分析------阶段二(run方法核心流程)

run方法核心流程 在分析和学习整个run方法之前&#xff0c;我们可以通过以下流程图来看下SpringApplication调用的run方法处理的核心操作包含哪些。 从上面的流程图中可以看出&#xff0c;SpringApplication在run方法中重点做了以下几步操作 获取监听器和参数配置打印banner…

【C语言学习——————预处理3000字讲解】

欢迎阅读新一期的c语言学习模块————预处理 ✒️个人主页&#xff1a;-_Joker_- &#x1f3f7;️专栏&#xff1a;C语言 &#x1f4dc;代码仓库&#xff1a;c_code &#x1f339;&#x1f339;欢迎大佬们的阅读和三连关注&#xff0c;顺着评论回访&#x1f339;&#x1f339…

防火墙第二次作业

一、什么是防火墙&#xff1f; 百度给出个一个定义&#xff1a;防火墙技术是通过有机结合各类用于安全管理与筛选的软件和硬件设备&#xff0c;帮助计算机网络于其内、外网之间构建一道相对隔绝的保护屏障&#xff0c;以保护用户资料与信息安全性的一种技术。 通俗的来讲&#…

由于找不到vcruntime140_1.dll,无法继续执行代码重新安装程序,怎么解决

vcruntime140_1.dll是Microsoft Visual C Redistributable for Visual Studio 2015中的一个动态链接库文件。它是用于支持在Windows操作系统上运行使用Visual C编写的应用程序或游戏所必需的文件之一。当出现vcruntime140_1.dll丢失的错误时&#xff0c;通常是由于缺少或损坏了…

《面试1v1》ElasticSearch架构设计

&#x1f345; 作者简介&#xff1a;王哥&#xff0c;CSDN2022博客总榜Top100&#x1f3c6;、博客专家&#x1f4aa; &#x1f345; 技术交流&#xff1a;定期更新Java硬核干货&#xff0c;不定期送书活动 &#x1f345; 王哥多年工作总结&#xff1a;Java学习路线总结&#xf…

【前端】html

HTML标签&#xff08;上&#xff09; 目标&#xff1a; -能够说出标签的书写注意规范 -能够写出HTML骨架标签 -能够写出超链接标签 -能够写出图片标签并说出alt和title的区别 -能够说出相对路径的三种形式 目录&#xff1a; HTML语法规范HTML基本结构标签开发工具HTML常用标…

Stable Diffusion教程(8) - X/Y/Z 图表使用

1. 介绍 这项功能可以在 文生图/图生图 界面的左下角种 “脚本” 一栏内选择 “X/Y/Z 图表” 以启用。 它创建具有不同参数的图像网格。使用 X 类型和 Y 类型字段选择应由行和列共享的参数&#xff0c;并将这些参数以逗号分隔输入 X 值 / Y 值字段。支持整数、浮点数和范围。…

数据结构——单链表OJ题(第二弹)

单链表OJ题 前言一、返回链表开始入环的第一个节点思路一思路二 二、返回链表的深度拷贝总结 前言 此次练习题有两道&#xff01; 有点小难度&#xff0c;但相信难不住大家的&#xff01; 我也会给出两道OJ题的链接&#xff0c;大家也赶快去试一试吧 一、返回链表开始入环的第…

浅聊Cesium.js 后处理原理

浅聊Cesium.js 后处理原理 使用例子: const stages viewer.scene.postProcessStages;const silhouette Cesium.PostProcessStageLibrary.createSilhouetteStage() silhouette.enabled true; stages.add(silhouette);silhouette.uniforms.color Cesium.Color.LIME;涉及到相…

OSPF作业3

题目 地址配置 R1&#xff1a; R2&#xff1a; R3&#xff1a; R4&#xff1a; R5&#xff1a; R6&#xff1a; R7&#xff1a; R8&#xff1a; R9&#xff1a; R10&#xff1a; R11&#xff1a; R12&#xff1a; 私网通及LSDB优化 R1&#xff1a; ospf 1 router-id 1.1.1.1 …

关于Godot游戏引擎制作流水灯

先上核心代码 游戏节点 流水灯的通途可以是 1. 装饰 2. 音乐类多媒体程序&#xff08;如FL中TB-303的步进灯&#xff09; FL Studio Transistor Bass

STM32基础入门学习笔记:内部高级功能应用

文章目录&#xff1a; 一&#xff1a;低功耗模式 1.睡眠模式测试程序 NVIC.h NVIC.c key.h key.c main.c 2.停机模式测试程序 main.c 3.待机模式测试程序 main.c 二&#xff1a;看门狗 1.独立看门狗测试程序 iwdg.h iwdg.c main.c 2.窗口看门狗测试程序 wwdg…