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…...
idea大量爆红问题解决
问题描述 在学习和工作中,idea是程序员不可缺少的一个工具,但是突然在有些时候就会出现大量爆红的问题,发现无法跳转,无论是关机重启或者是替换root都无法解决 就是如上所展示的问题,但是程序依然可以启动。 问题解决…...
【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器
一.自适应梯度算法Adagrad概述 Adagrad(Adaptive Gradient Algorithm)是一种自适应学习率的优化算法,由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率,适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...
Zustand 状态管理库:极简而强大的解决方案
Zustand 是一个轻量级、快速和可扩展的状态管理库,特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...
uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖
在前面的练习中,每个页面需要使用ref,onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入,需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...
【网络安全产品大调研系列】2. 体验漏洞扫描
前言 2023 年漏洞扫描服务市场规模预计为 3.06(十亿美元)。漏洞扫描服务市场行业预计将从 2024 年的 3.48(十亿美元)增长到 2032 年的 9.54(十亿美元)。预测期内漏洞扫描服务市场 CAGR(增长率&…...
linux 下常用变更-8
1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行,YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID: YW3…...
聊一聊接口测试的意义有哪些?
目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开,首…...
Element Plus 表单(el-form)中关于正整数输入的校验规则
目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入(联动)2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...
深度学习习题2
1.如果增加神经网络的宽度,精确度会增加到一个特定阈值后,便开始降低。造成这一现象的可能原因是什么? A、即使增加卷积核的数量,只有少部分的核会被用作预测 B、当卷积核数量增加时,神经网络的预测能力会降低 C、当卷…...
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
以下是一个完整的 Angular 微前端示例,其中使用的是 Module Federation 和 npx-build-plus 实现了主应用(Shell)与子应用(Remote)的集成。 🛠️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...
