使用ant design的modal时,发现自定义组件的样式(组件高度)被改变了!
一 问题描述
在项目中,自定义了一个组件,分别在界面和 antd的modal中都有使用到。但是突然发现,界面中的组件样式跟modal中的组件样式高度不一样。modal中的组件整体要比页面中的组件要高一点。
项目中的自定义组件比较复杂,因此,自己写了一个简单的测试功能,如下所示:

如上图,可以看到,常规div的样式整体比modal中的div要矮一点(差别不是特别大)。
二 问题原因
测试程序比较简单,因此可以很容易发现是行高不一致导致的。查了antd官网才看到,antd的modal中的文本自己设置了行高(lineHeight),因此modal中的组件会整体高一些(antd官网上,modal的默认文本行高为1.5714285714285714)。而自己自定义的组件中没有设置文本行高。这就是导致组件高度在html和modal中不一致的根本原因。

三 解决办法
给自定义组件文本添加固定的行高(lineHeight)。

四 测试代码如下
import React, {useState} from "react";
import {Button, Divider, Modal} from "antd";export default () => {const [open, setOpen] = useState(false);const testDiv = <divstyle={{color: "white",width: 200,backgroundColor: "rgba(51, 119, 255, 1)",fontSize: 14,lineHeight: 1}}>这是一行用于测试的文字</div>return (<div style={{height: 820, padding: 20}}><Button type={"primary"} onClick={() => setOpen(true)}>打开弹窗</Button><Divider/><div>{testDiv}</div><Modal open={open} onCancel={() => setOpen(false)}>{testDiv}</Modal></div>);
}
相关文章:
使用ant design的modal时,发现自定义组件的样式(组件高度)被改变了!
一 问题描述 在项目中,自定义了一个组件,分别在界面和 antd的modal中都有使用到。但是突然发现,界面中的组件样式跟modal中的组件样式高度不一样。modal中的组件整体要比页面中的组件要高一点。 项目中的自定义组件比较复杂,因此&…...
NLP从零开始------8文本进阶处理之文本向量化
1. 文本向量化概述 随着计算机计算能力的大幅度提升,机器学习和深度学习都取得了长足的发展。NLP越来越多的通过应用机器学习和深度学习工具解决问题,例如通过深度学习模型从网络新闻报道中分析出关键词汇与舆论主题并构建关系图谱。在这种背景下&#x…...
【网络编程】字节序,IP地址、点分十进制、TCP与UDP的异同
记录学习,思维导图绘制 目录 1、字节序编辑 2、IP地址 3、点分十进制 4、TCP与UDP的异同 1、字节序 2、IP地址 3、点分十进制 4、TCP与UDP的异同...
关于k8s的pvc存储卷
目录 1.PVC 和 PV 1.1 PV 1.2 PVC 1.3 StorageClass 1.4 PV和PVC的生命周期 2.实战演练 2.1 创建静态pv 2.2 创建动态pv 3.总结 1.PVC 和 PV 1.1 PV PV 全称叫做 Persistent Volume,持久化存储卷。它是用来描述或者说用来定义一个存储卷的,…...
【物联网设备端开发】ESP开发工具:QEMU的使用方法
概要 本文提供了一些运行QEMU的ESP特定说明。有关QEMU的一般使用问题,请参阅官方文档:https://www.qemu.org/documentation/. 编译 QEMU 准备工作 在此之前,请查看有关构建先决条件的QEMU文档。如果你在Linux主机上构建QEMU,你…...
c++中std::endl 和“\n“ 这两个换行符有什么区别
std::endl 和 "\n" 都用于在C中生成换行符,但它们之间有一些重要的区别 std::endl: 功能:输出一个换行符,并刷新输出流(即缓冲区)。作用:确保所有数据立即输出到目的地,例…...
http中get和post怎么选
5.4.2.怎么选择1.如果你是想从服务器上获取资源,建议使用GET请求,如果你这个请求是为了向服务器提交数据,建议使用POST请求。2.大部分的form表单提交,都是post方式,因为form表单中要填写大量的数据,这些数据…...
数据分析及应用:快手直播间人员在线分析
目录 0 需求描述 1、进入直播间的高峰期为?(以进入用户数衡量) 2、晚上 11 点,哪个直播间的进入人数最多? 3、20:00-23:00,娱乐类、搞笑类,进入人数最多直播间分别是? 4、娱乐类、搞笑类,人均在线时长(退出时间-进入时间)最长的直播间分别是? 5、同时在线人数…...
【Python】nn.nn.CircularPad1、2、3d函数和nn.ConstantPad1、2、3d函数详解和示例
前言 在深度学习中,尤其是在处理图像、音频或其他多维数据时,数据填充(Padding)是一个常见的操作。填充不仅可以保持数据的空间维度,还能在卷积操作中避免信息丢失。PyTorch提供了多种填充方式,其中nn.Cir…...
LearnOpenGL——混合、面剔除
LearnOpenGL——混合、面剔除 混合 Blending一、丢弃片段 Alpha Test二、混合 Alpha Blending渲染顺序 面剔除一、环绕顺序二、面剔除 混合 Blending OpenGL中,混合(Blending)通常是实现物体透明度(Transparency)的一种技术。透明的物体可以是完全透明的࿰…...
视频网站为何热衷于SCDN
视频网站为何热衷于SCDN?随着互联网技术的飞速发展,视频网站已成为人们日常生活中不可或缺的一部分。无论是观看高清电影、热门剧集,还是直播体育赛事、游戏竞技,视频网站都以其丰富的内容和便捷的访问方式吸引了无数用户。然而&a…...
Redis与DataBase保持数据一致性
文章目录 1. 读取数据2. 写数据2.1 先操作缓存2.2 先操作数据库 在我们系统中缓存最常用的策略是:服务端需要同时维系DB和Cache,并且是以DB的结果为准, Cache-Aside Pattern(缓存分离模式、旁路缓存)。 1. 读取数据 当…...
解决 MacOS 连接公司 VPN 成功但是不能网络的问题
目录 解决办法2024 Mac mini 爆料 解决办法 操作比较简单,修改配置文件即可(如果没有则需要手动创建)。 sudo vim /etc/ppp/options在此文件下,加入 plugin L2TP.ppp: plugin L2TP.ppp如果文件里有l2tpnoipsec&…...
【Kubernetes】k8s集群之Pod容器资源限制和三种探针
目录 一、Pod容器的资源限制 1.资源限制 2.Pod 和容器的资源请求与限制 3.CPU 资源单位 4.内存资源单位 二、Pod容器的三种探针 1.探针的三种规则 2.Probe支持三种检查方法: 一、Pod容器的资源限制 1.资源限制 当定义 Pod 时可以选择性地为每个容器设定所…...
从古代驿站体系看软件安全管控@安全历史04
在古代,车、马都很慢,信息传递很不顺畅,中央的政令又是如何传达至地方的呢?实际上,很多朝代都有专门的驿站制度,可以保障全国各地的信息传递,对于维护统治和稳定有着关键作用。 若将国家比作一个…...
8.8 哈希表简单 1 Two Sum 141 Linked List Cycle
1 Two Sum class Solution { public:vector<int> twoSum(vector<int>& nums, int target) {//给的target是目标sum 要返回vector<int> res(2,0);是在num中找加数//首先假设每个输入都是由唯一的结果,而且不适用相同的元素两次一共有n*(n-1)种…...
动态规划之——背包DP(完结篇)
文章目录 概要说明分组背包模板例题1思路code模板例题2思路code 有依赖的背包问题模板例题思路code 背包问题求方案数模板例题思路code 背包问题求具体方案模板例题思路code 概要说明 本文讲分组背包、有依赖的背包、 背包问题求方案数以及背包问题求具体方案 入门篇(01背包和…...
Advanced IP Scanner - 网络扫描工具介绍
Advanced IP Scanner 是一款免费、快速且用户友好的网络扫描工具。它能够帮助用户扫描局域网(LAN)中的所有设备,提供详细的设备信息,包括IP地址、MAC地址、设备名称和厂商信息。该工具对IT管理员和普通用户都非常有用,…...
数据库事务的四大特性ACID
数据库事务的四大特性ACID 数据库事务(Transaction)是数据库管理系统(DBMS)执行过程中的一个逻辑单位,由一个或多个SQL语句组成,这些语句作为一个整体一起向系统提交,要么全部执行,…...
ELK架构介绍
一、ELK简介 ELK 是由三个开源软件组成的,分别是:Elasticsearch、Logstash和Kibana,这三个软件各自在日志管理和数据分析领域发挥着重要作用。Elasticsearch提供分布式存储和搜索能力;Logstash负责数据收集和处理,而K…...
css实现圆环展示百分比,根据值动态展示所占比例
代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...
NXP S32K146 T-Box 携手 SD NAND(贴片式TF卡):驱动汽车智能革新的黄金组合
在汽车智能化的汹涌浪潮中,车辆不再仅仅是传统的交通工具,而是逐步演变为高度智能的移动终端。这一转变的核心支撑,来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒(T-Box)方案:NXP S32K146 与…...
C/C++ 中附加包含目录、附加库目录与附加依赖项详解
在 C/C 编程的编译和链接过程中,附加包含目录、附加库目录和附加依赖项是三个至关重要的设置,它们相互配合,确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中,这些概念容易让人混淆,但深入理解它们的作用和联…...
Redis:现代应用开发的高效内存数据存储利器
一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发,其初衷是为了满足他自己的一个项目需求,即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源,Redis凭借其简单易用、…...
「全栈技术解析」推客小程序系统开发:从架构设计到裂变增长的完整解决方案
在移动互联网营销竞争白热化的当下,推客小程序系统凭借其裂变传播、精准营销等特性,成为企业抢占市场的利器。本文将深度解析推客小程序系统开发的核心技术与实现路径,助力开发者打造具有市场竞争力的营销工具。 一、系统核心功能架构&…...
Java后端检查空条件查询
通过抛出运行异常:throw new RuntimeException("请输入查询条件!");BranchWarehouseServiceImpl.java // 查询试剂交易(入库/出库)记录Overridepublic List<BranchWarehouseTransactions> queryForReagent(Branch…...
文件上传漏洞防御全攻略
要全面防范文件上传漏洞,需构建多层防御体系,结合技术验证、存储隔离与权限控制: 🔒 一、基础防护层 前端校验(仅辅助) 通过JavaScript限制文件后缀名(白名单)和大小,提…...
aurora与pcie的数据高速传输
设备:zynq7100; 开发环境:window; vivado版本:2021.1; 引言 之前在前面两章已经介绍了aurora读写DDR,xdma读写ddr实验。这次我们做一个大工程,pc通过pcie传输给fpga,fpga再通过aur…...
Docker环境下安装 Elasticsearch + IK 分词器 + Pinyin插件 + Kibana(适配7.10.1)
做RAG自己打算使用esmilvus自己开发一个,安装时好像网上没有比较新的安装方法,然后找了个旧的方法对应试试: 🚀 本文将手把手教你在 Docker 环境中部署 Elasticsearch 7.10.1 IK分词器 拼音插件 Kibana,适配中文搜索…...
vue3 手动封装城市三级联动
要做的功能 示意图是这样的,因为后端给的数据结构 不足以使用ant-design组件 的联动查询组件 所以只能自己分装 组件 当然 这个数据后端给的不一样的情况下 可能组件内对应的 逻辑方式就不一样 毕竟是 三个 数组 省份 城市 区域 我直接粘贴组件代码了 <temp…...
