当前位置: 首页 > 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';

使用效果

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

 

相关文章:

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

ant design是一个很棒的组件库&#xff0c;官方地址&#xff1a;快速上手 - Ant Design 但是如何在React里面用起来&#xff0c;好像并不是很顺畅&#xff0c;没有像Vue里面那么友好&#xff0c;因为我踩过这个坑&#xff0c;虽然安装很简单&#xff0c;但是想要出样式&#x…...

Leetcode | 有效的括号、最长有效括号

一、有效的括号 给定一个只包括 (&#xff0c;)&#xff0c;{&#xff0c;}&#xff0c;[&#xff0c;] 的字符串 s &#xff0c;判断字符串是否有效。 有效字符串需满足&#xff1a; 左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。每个右括号都有一个对应…...

思科模拟器配置静态路由(下一跳使用IP)

Router0配置代码&#xff1a;##端口配置 Router(config)#int fastEthernet 0/0 Router(config-if)#ip address 192.168.10.254 255.255.255.0 Router(config-if)#no shutdown Router(config-if)#int fastEthernet 0/1 Router(config-if)#ip address 192.168.20.1 255.255.255.2…...

MyBatis -- 执行流程

传统JDBC开发 代码样例 import java.sql.*;public class JdbcExample {public static void main(String[] args) {Connection conn DriverManager.getConnection("jdbc:mysql://localhost:3306/mydatabase", "username", "password");// 创建…...

springboot背诵

1、springboot简介 2、spring注解 Bean&#xff1a; Configuration&#xff1a; Component&#xff1a; Controller&#xff1a; Service&#xff1a; Repository&#xff1a; ComponentScan&#xff1a; Import&#xff1a; Conditional&#xff1a; ConfigurationProperties&…...

WebGL: 几个入门例子

本文罗列几个WebGL入门例子&#xff0c;用于帮助WebGL学习。 例子1&#xff1a;绘制三角形 <!DOCTYPE HTML> <html loang"en"><head><title>Triangle</title><meta charset"utf-8"><script>var gl;var canvas…...

App Cleaner Uninstaller for Mac 苹果电脑软件卸载工具

App Cleaner & Uninstaller 是一款非常有用的 Mac 应用程序清理和卸载工具。它可以彻底地清理系统中的应用程序、扩展和残留文件&#xff0c;以释放磁盘空间并优化系统性能。 此外&#xff0c;它还提供了磁盘空间监控和智能清理建议等功能&#xff0c;使用户可以轻松地管理…...

基于Yolov2深度学习网络的车辆检测算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1. 卷积神经网络&#xff08;CNN&#xff09; 4.2. YOLOv2 网络 4.3. 实现过程 4.4. 应用领域 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 MATLAB2022A 3.部分核心…...

Java的I/O类库- NIO

Java NIO&#xff08;New I/O&#xff09;是Java平台提供的一种用于非阻塞I/O操作的API。它引入了一组新的Java类&#xff0c;用于实现高性能的、非阻塞的I/O操作&#xff0c;以替代传统的阻塞式I/O&#xff08;IO Blocking&#xff09;模型。Java NIO的核心是基于Channel&…...

【ASP.NET MVC】使用动软(三)(11)

一、问题 上文中提到&#xff0c;动软提供了数据库的基本操作功能&#xff0c;但是往往需要添加新的功能来解决实际问题&#xff0c;比如GetModel&#xff0c;通过id去查对象&#xff1a; 这个功能就需要进行改进&#xff1a;往往程序中获取的是实体的其他属性&#xff0c;比如…...

基于MATLAB长时间序列遥感数据植被物候提取与分析

MATLAB MATLAB是美国MathWorks公司出品的商业数学软件&#xff0c;用于数据分析、无线通信、深度学习、图像处理与计算机视觉、信号处理、量化金融与风险管理、机器人&#xff0c;控制系统等领域。 [1] MATLAB是matrix&laboratory两个词的组合&#xff0c;意为矩阵工厂&a…...

K8S deployment 重启的三种方法

一般重启deployment&#xff0c;常规操作是删掉对应的pod, 但如果有多个副本集的话&#xff0c;一个个删很麻烦。 除了删除pod&#xff0c;还可以&#xff1a; 方案一&#xff1a; 加上环境变量 kubectl patch deploy <deployment-name> -p {"spec":{"…...

解决Linux下PyCharm无法新建文件

一、问题描述 如图&#xff0c;在Ubuntu Linux系统中使用pycharm管理项目时&#xff0c;提示无法新建.py源文件&#xff1a; 二、问题解决 将问题定性为文件夹&#xff08;目录&#xff09;权限问题&#xff0c;在终端中打开项目文件夹的上级目录&#xff0c;将整个项目目录的…...

规则引擎技术解决方案

1 概述 1.1 规则引擎的背景 业务系统在应用过程中&#xff0c;常常包含着要处理“复杂、多变”的部分&#xff0c;这部分往往是“业务规则”或者是“数据的处理逻辑”。因此这部分的动态规则的问题&#xff0c;往往需要可配置&#xff0c;并对系统性能和热部署有一定的要求。从…...

2023奇安信天眼设备--面试题

1.在天眼分析平台网络协议中sip、dip、sport、dport字段表示的含义是什么&#xff1f; sip 源IP、dip 目的IP、sport 源端口、dport 目的端口 2.在天眼分析平台DNS协议中dns type字段表示的含义是? dns type表示DNS请求类型 0代表DNS请求&#xff0c;1代表DNS响应 3.dns_typ…...

【剑指Offer 58】 左旋转字符串,Java解密。

LeetCode 剑指Offer 75道练习题 文章目录 剑指Offer:左旋转字符串示例:限制:解题思路:剑指Offer:左旋转字符串 【题目描述】 字符串的左旋转操作是把字符串前面的若干个字符转移到字符串的尾部。请定义一个函数实现字符串左旋转操作的功能。比如,输入字符串"abcdef…...

Python SMTP发送邮件

Python SMTP发送邮件 SMTP&#xff08;Simple Mail Transfer Protocol&#xff09;即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则&#xff0c;由它来控制信件的中转方式。 python的smtplib提供了一种很方便的途径发送电子邮件。它对smtp协议进行了简单的…...

Jmeter-获取接口响应头(Response headers)信息进行关联

文章目录 Jmeter-获取接口响应头&#xff08;Response headers&#xff09;信息进行关联使用正则表达式提取器将Set-Cookie的值提取出来在其余接口中关联该提取信息运行查看关联是否成功 Jmeter-获取接口响应头&#xff08;Response headers&#xff09;信息进行关联 获取某一…...

解密爬虫ip是如何被识别屏蔽的

在当今信息化的时代&#xff0c;网络爬虫已经成为许多企业、学术机构和个人不可或缺的工具。然而&#xff0c;随着网站安全防护的升级&#xff0c;爬虫ip往往容易被识别并屏蔽&#xff0c;给爬虫工作增加了许多困扰。在这里&#xff0c;作为一家专业的爬虫ip供应商&#xff0c;…...

GPIO实验

一、GPIO GPIO&#xff08;General-purpose input/output&#xff09;即通用型输入输出&#xff0c;GPIO可以控制连接在其之上的引脚实现信号的输入和输出 芯片的引脚与外部设备相连&#xff0c;从而实现与外部硬件设备的通讯、控制及信号采集等功能 LED实验步骤 最终目的&am…...

揭秘!中国八大软件外包公司

&#x1f449; 这是一个或许对你有用的社群&#x1f431; 一对一交流/面试小册/简历优化/求职解惑&#xff0c;欢迎加入「芋道快速开发平台」知识星球。下面是星球提供的部分资料&#xff1a; 《项目实战&#xff08;视频&#xff09;》&#xff1a;从书中学&#xff0c;往事上…...

丹青识画系统与STM32嵌入式项目结合:智能相框原型开发

丹青识画系统与STM32嵌入式项目结合&#xff1a;智能相框原型开发 1. 项目缘起&#xff1a;当老相框遇上新AI 你有没有想过&#xff0c;家里墙上那个安安静静的相框&#xff0c;除了展示照片&#xff0c;还能做些什么&#xff1f; 我手头正好有几块闲置的STM32开发板和几块小…...

Spring Boot 4.0正式版GA后72小时内,头部云厂商紧急下架3款旧Agent插件——你的生产集群是否仍在使用已被标记为EOL的Instrumentation库?

第一章&#xff1a;Spring Boot 4.0 Agent-Ready 架构演进与EOL危机全景Spring Boot 4.0 并非官方已发布版本&#xff0c;而是社区与企业级监控、可观测性厂商围绕 Java Agent 深度集成所推动的架构预演范式。其核心驱动力源于 Spring Boot 3.x 的 Jakarta EE 9 迁移完成、Graa…...

QSimpleUpdater 详解+详细使用教程:为 Qt 应用一键接入自动更新功能

QSimpleUpdater 详解详细使用教程&#xff1a;为 Qt 应用一键接入自动更新功能一、QSimpleUpdater 介绍1、QSimpleUpdater 是什么&#xff1f;2、核心概念与工作流程3、集成与使用 (C 示例)3.1、配置与检查3.2、处理信号 - 弹出更新对话框示例4、高级配置 (JSON 格式)5、重要注…...

突破性AI文献管理:Zotero-GPT智能插件深度解析与实战指南

突破性AI文献管理&#xff1a;Zotero-GPT智能插件深度解析与实战指南 【免费下载链接】zotero-gpt GPT Meet Zotero. 项目地址: https://gitcode.com/gh_mirrors/zo/zotero-gpt 在学术研究领域&#xff0c;文献管理一直是研究者面临的核心挑战。每天面对海量的学术论文&…...

GPEN完整操作流程:从HTTP链接访问到结果保存

GPEN完整操作流程&#xff1a;从HTTP链接访问到结果保存 1. 引言&#xff1a;你的数字美容刀 你有没有翻出过一张老照片&#xff0c;里面的人脸模糊得只剩下轮廓&#xff1f;或者&#xff0c;用AI生成了一张很棒的图&#xff0c;偏偏人脸部分崩坏了&#xff1f;又或者&#x…...

stock-sdk-mcp 的实践整理郊

一、什么是urllib3&#xff1f; urllib3 是一个用于处理 HTTP 请求和连接池的强大、用户友好的 Python 库。 它可以帮助你&#xff1a; 发送各种 HTTP 请求&#xff08;GET, POST, PUT, DELETE等&#xff09;。 管理连接池&#xff0c;提高网络请求效率。 处理重试和重定向。 支…...

3.一文看懂反向传播:从单个神经元到 PyTorch 自动求导

反向求导&#xff0c;多层次对应一个神经&#xff0c;单个神经元场景 学习这一篇的前提是&#xff0c;已经学会了梯度算法和线性结构算法&#xff0c;不明白的可以去看我之前的文章。 前面看不懂的&#xff0c;直接跳转到 “ 反向传播的流程 ” 底层的数学算法 z 是中间变量 u …...

【GUI-Agent】阶跃星辰 GUI-MCP 解读---()---HITL(Human In The Loop)鬃

插件化架构 v3 版本最大的变化是引入了模块化插件系统。此前版本中集成在核心包里的原生功能&#xff0c;现在被拆分成独立的插件。 每个插件都是一个独立的 Composer 包&#xff0c;包含 Swift 和 Kotlin 代码、权限清单以及原生依赖。开发者只需安装实际用到的插件&#xff0…...

优启通 WINPE 如何创建桌面快捷方式?【详细图文教程】

&#x1f525;个人主页&#xff1a;杨利杰YJlio❄️个人专栏&#xff1a;《Sysinternals实战教程》《Windows PowerShell 实战》《WINDOWS教程》《IOS教程》《微信助手》《锤子助手》 《Python》 《Kali Linux》 《那些年未解决的Windows疑难杂症》&#x1f31f; 让复杂的事情更…...