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

news2024/9/29 8:07:14

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.coloradmin.cn/o/837412.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Spring】Spring中的设计模式

文章目录 责任链模式工厂模式适配器模式代理模式模版方法观察者模式构造器模式 责任链模式 Spring中的Aop的通知调用会使用责任链模式责任链模式介绍 角色&#xff1a;抽象处理者&#xff08;Handler&#xff09;具体处理者&#xff08;ConcreteHandler1&#xff09;客户类角…

ARM裸机-13(SDRAM和重定位relocate)

1、汇编写启动代码之关看门狗 1.1、什么是看门狗 看门狗(watch dog timer&#xff0c;看门狗定时器)。大家想象这样一个场景:家门口有一只狗&#xff0c;这个狗定时会饿(例如说2小时一饿)&#xff0c;够饿了会胡乱咬死人。人进进出出要想保证安全必须提前喂狗(必须在上次喂过后…

【夜深人静学习数据结构与算法 | 第十二篇】动态规划——背包问题

目录 前言&#xff1a; 01背包问题&#xff1a; 二维数组思路&#xff1a; 一维数组思路&#xff1a; 总结&#xff1a; 前言&#xff1a; 在前面我们学习动态规划理论知识的时候&#xff0c;我就讲过要介绍一下背包问题&#xff0c;那么今天我们就来讲解一下背包问题。 在这…

linux下性能分析工具Perf安装与用法

目录 1、Perf介绍 2、火焰图分类 &#xff08;1&#xff09;CPU &#xff08;2&#xff09;Memory Flame Graphs &#xff08;3&#xff09;Off-CPU Flame Graphs &#xff08;4&#xff09;Hot/Cold Flame Graphs &#xff08;5&#xff09;Differential 3、火焰图安装命令 …

【项目 线程 1】 3.1线程概述 3.2创建线程 3.3终止线程 3.4连接已终止的线程

文章目录 3.1线程概述线程概述线程和进程区别线程和进程虚拟地址空间线程之间共享和非共享资源NPTL 3.2 创建线程线程操作创建线程出现报错及原因 3.3终止线程3.4连接已终止的线程 3.1线程概述 线程概述 并发&#xff1a;两队人用同一个咖啡机&#xff08;本质上同一时刻只有…

算法竞赛入门【码蹄集新手村600题】(MT1100-1120)C语言

算法竞赛入门【码蹄集新手村600题】(MT1100-1120&#xff09;C语言 目录MT1101 带参数的宏IIMT1102 长方体MT1103 球体积MT1104 三角形MT1105 英寸英尺英里MT1106 盎司磅MT1107 加仑/升MT1108 保留小数MT1109 和10相比MT1110 最小值MT1111 最大值MT1112 中庸之道MT1113 三人同行…

这可是全网最全的网络工程师零基础实战视频整理,最新版分享

互联网中每一项傍身的技能都是需要从如何入门开始的&#xff0c;网络技术也是如此&#xff01; 网络技术区别其他互联网技能的一点是学习需要从设备开始&#xff0c;只有认识了解了路由器、交换机、防火墙这些网络设备&#xff0c;才开始从网络通信原理开始&#xff0c;这使得网…

数据安全与可追溯:PDM系统的信息保护锦囊

在当今数字化时代&#xff0c;数据安全与可追溯是企业管理中至关重要的环节。PDM系统&#xff08;Product Data Management&#xff0c;产品数据管理&#xff09;作为一款强大的数字化工具&#xff0c;为企业提供了全方位的信息保护锦囊。让我们一同深入探讨&#xff0c;看看PD…

k8s手动发布镜像的方法

kubectl edit deploy编辑对应的文件&#xff0c;并:wq!保存即可

STL C++学习背景

STL C学习背景 背景知识 背景知识 STL前置知识 STL&#xff0c;英文全称 standard template library&#xff0c;中文可译为标准模板库或者泛型库&#xff0c;其包含有大量的模板类和模板函数&#xff0c;是 C 提供的一个基础模板的集合&#xff0c;用于完成诸如输入/输出、数…

2023新款MacBook Pro 14效果如何

新款MacBook Pro 14 显示屏背面依然保持着苹果LOGO&#xff0c;而且比Air大一圈&#xff0c;看来贵是有道理的&#xff0c;LOGO都变大了&#xff01;该机配件是一个67W的充电头&#xff0c;以及MagSafe 3的充电线。而机身金属感十足&#xff0c;上手体验&#xff0c;确实有万元…

Java阶段五Day21

Java阶段五Day21 文章目录 Java阶段五Day21问题解析rocketmq清空数据 linux学习背景什么是linux系统虚拟机介绍启动 虚拟机linux虚拟机网络的问题 linux系统的基础命令命令提示符命令格式pwd指令ls指令cd指令mkdirtouch指令cp指令rm指令mv指令cat指令tail指令 文本编辑器vim操作…

代码随想录算法训练营第八天| 28.找到字符串中第一个匹配项的下标,459.重复的子字符串(二刷三刷)

28. 找出字符串中第一个匹配项的下标 28.找到字符串中第一个匹配项的下标 KMP算法 原串&#xff1a;sadbutsad 匹配串&#xff1a;sad 构造next数组其实就是计算模式串s的前缀表的过程。与原串是无关的 关于最长公共前缀和最长公共后缀&#xff1a; 前缀是指不包含最后一…

cmake配置Qt工程

cmake 工程配置 # 指定版本和项目 cmake_minimum_required(VERSION 3.10) set(TARGET_NAME labelDeviceView) project(${TARGET_NAME} ) include(${CMAKE_CURRENT_LIST_DIR}/../../../../../../ossLib/ossLib/env.cmake) set(CMAKE_PREFIX_PATH "D:/Qt6/6.5.2/msvc2019…

进程复制fork详解 僵尸进程 孤儿进程 写时拷贝技术 缓冲区

fork函数讲解 进程复制fork基本使用简单分页 逻辑页 物理页 页表fork的三个面试练习题缓冲区僵死进程孤儿进程写时拷贝 进程替换exexc 介绍简易命令解释器strtok()函数讲解 进程复制 fork基本使用 父进程fork后&#xff0c;新的进程产生&#xff0c;新的进程就继续从fork往后的…

Spring集成Web

目录 1、简介 2、监听器 3、Spring提供的listener 3.1、xml 3.2、配置类 3.3、WebApplicationContextUtils 3.4、说明 4、自己复现的listener 4.1、ContextLoaderListener 4.2、WebApplicationContextUtils 4.3、Web调用 ⭐作者介绍&#xff1a;大二本科网络工程专业…

Less is More: Focus Attention for Efficient DETR

摘要 类似detr的模型显著提高了探测器的性能&#xff0c;甚至优于经典的卷积模型。然而&#xff0c;在传统的编码器结构中&#xff0c;所有的标记都带来了冗余的计算负担。最近的稀疏化策略利用了信息标记的一个子集&#xff0c;通过稀疏编码器来降低注意力的复杂性&#xff0…

观测,让运维更简单!龙蜥社区系统运维 MeetUp 等你报名

为了让广大社区用户和开发者近距离感受 Linux 和 eBPF 技术的魅力&#xff0c;龙蜥社区系统运维于 08 月 12 日在杭州举行 MeetUp 。过去&#xff0c;系统运维 SIG 和大家一起交流了 eBPF 在安全和网络的最佳应用和实践&#xff0c;以及 Linux 在手机和服务器上的运维经验等技术…

深度学习训练营之CGAN生成手势图像

深度学习训练营之CGAN生成手势 原文链接CGAN简单介绍环境介绍前置工作数据导入所需的包加载数据创建数据集查看数据集 模型设置初始化模型的权重定义生成器构造判别器 模型训练定义损失函数设置超参数正式开始训练 结果可视化 原文链接 &#x1f368; 本文为&#x1f517;365天…

leetcode 763. 划分字母区间

2023.8.3 本题的关键是要确保同一字母需要在同一片段中&#xff0c;而这就需要关注到每个字母最后一次出现的位置。 思路&#xff1a;用一个哈希表保存每个字母&#xff08;26个&#xff09;最后一次出现的位置。然后从头遍历&#xff0c;不断更新最右边界&#xff0c;直到当前…