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

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

思科模拟器配置静态路由(下一跳使用IP)
Router0配置代码:##端口配置 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: Configuration: Component: Controller: Service: Repository: ComponentScan: Import: Conditional: ConfigurationProperties&…...

WebGL: 几个入门例子
本文罗列几个WebGL入门例子,用于帮助WebGL学习。 例子1:绘制三角形 <!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 应用程序清理和卸载工具。它可以彻底地清理系统中的应用程序、扩展和残留文件,以释放磁盘空间并优化系统性能。 此外,它还提供了磁盘空间监控和智能清理建议等功能,使用户可以轻松地管理…...

基于Yolov2深度学习网络的车辆检测算法matlab仿真
目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1. 卷积神经网络(CNN) 4.2. YOLOv2 网络 4.3. 实现过程 4.4. 应用领域 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 MATLAB2022A 3.部分核心…...
Java的I/O类库- NIO
Java NIO(New I/O)是Java平台提供的一种用于非阻塞I/O操作的API。它引入了一组新的Java类,用于实现高性能的、非阻塞的I/O操作,以替代传统的阻塞式I/O(IO Blocking)模型。Java NIO的核心是基于Channel&…...

【ASP.NET MVC】使用动软(三)(11)
一、问题 上文中提到,动软提供了数据库的基本操作功能,但是往往需要添加新的功能来解决实际问题,比如GetModel,通过id去查对象: 这个功能就需要进行改进:往往程序中获取的是实体的其他属性,比如…...
基于MATLAB长时间序列遥感数据植被物候提取与分析
MATLAB MATLAB是美国MathWorks公司出品的商业数学软件,用于数据分析、无线通信、深度学习、图像处理与计算机视觉、信号处理、量化金融与风险管理、机器人,控制系统等领域。 [1] MATLAB是matrix&laboratory两个词的组合,意为矩阵工厂&a…...
K8S deployment 重启的三种方法
一般重启deployment,常规操作是删掉对应的pod, 但如果有多个副本集的话,一个个删很麻烦。 除了删除pod,还可以: 方案一: 加上环境变量 kubectl patch deploy <deployment-name> -p {"spec":{"…...

解决Linux下PyCharm无法新建文件
一、问题描述 如图,在Ubuntu Linux系统中使用pycharm管理项目时,提示无法新建.py源文件: 二、问题解决 将问题定性为文件夹(目录)权限问题,在终端中打开项目文件夹的上级目录,将整个项目目录的…...
规则引擎技术解决方案
1 概述 1.1 规则引擎的背景 业务系统在应用过程中,常常包含着要处理“复杂、多变”的部分,这部分往往是“业务规则”或者是“数据的处理逻辑”。因此这部分的动态规则的问题,往往需要可配置,并对系统性能和热部署有一定的要求。从…...

2023奇安信天眼设备--面试题
1.在天眼分析平台网络协议中sip、dip、sport、dport字段表示的含义是什么? sip 源IP、dip 目的IP、sport 源端口、dport 目的端口 2.在天眼分析平台DNS协议中dns type字段表示的含义是? dns type表示DNS请求类型 0代表DNS请求,1代表DNS响应 3.dns_typ…...
【剑指Offer 58】 左旋转字符串,Java解密。
LeetCode 剑指Offer 75道练习题 文章目录 剑指Offer:左旋转字符串示例:限制:解题思路:剑指Offer:左旋转字符串 【题目描述】 字符串的左旋转操作是把字符串前面的若干个字符转移到字符串的尾部。请定义一个函数实现字符串左旋转操作的功能。比如,输入字符串"abcdef…...

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

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

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

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

装饰模式(Decorator Pattern)重构java邮件发奖系统实战
前言 现在我们有个如下的需求,设计一个邮件发奖的小系统, 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其…...

docker详细操作--未完待续
docker介绍 docker官网: Docker:加速容器应用程序开发 harbor官网:Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台,用于将应用程序及其依赖项(如库、运行时环…...

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】
微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来,Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解
【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了: 这一篇我们开始讲: 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下: 一、场景操作步骤 操作步…...

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例
文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...
ffmpeg(四):滤镜命令
FFmpeg 的滤镜命令是用于音视频处理中的强大工具,可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下: ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜: ffmpeg…...

NFT模式:数字资产确权与链游经济系统构建
NFT模式:数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新:构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议:基于LayerZero协议实现以太坊、Solana等公链资产互通,通过零知…...

(转)什么是DockerCompose?它有什么作用?
一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用,而无需手动一个个创建和运行容器。 Compose文件是一个文本文件,通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...
LeetCode - 199. 二叉树的右视图
题目 199. 二叉树的右视图 - 力扣(LeetCode) 思路 右视图是指从树的右侧看,对于每一层,只能看到该层最右边的节点。实现思路是: 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

Python Ovito统计金刚石结构数量
大家好,我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构,但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法,可以持续统计各步的金刚石结构,具体代码如下: from ovito…...