Antd Select 添加中框

默认antd 的 Select中间并没有竖框,但是ui design设计了,所以记录一下如何添加

默认:
在这里插入图片描述
CSS:

.custom-select-suffix-icon {display: flex;align-items: center;
}.custom-select-suffix-icon::before {content: '';height: 31px; /* 调整竖线的高度 */border-left: 1px solid #d9d9d9; /* 调整竖线的颜色和宽度 */margin-right: 8px; /* 图标和竖线之间的间距 */
}

TSX:

<SelectsuffixIcon={<div className="custom-select-suffix-icon"><YourIcon/></div>}...
/>

这样就可以完成需要的效果了
如果需要渐变色别忘了添加

transition: all 0.2s;

跟antd保持同步。

如果有帮助到你,能点个赞嘛!!谢谢!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/222172.shtml

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

相关文章

持续学习动态架构算法LwF(Learning without Forgetting )解读总结与代码注释

0.持续学习 持续学习相关文章汇总&#xff0c;包含论文地址、代码地址、具体分析解读地址 1.LwF算法相关链接 论文地址代码地址 2.基本想法 针对问题&#xff1a;在无法获得原始任务训练数据的情况下&#xff0c;适合使视觉系统适应新任务&#xff0c;并且保证其在旧任务上…

在Vue开发中v-if指令和v-show指令的使用介绍和区别及使用场景

一、条件渲染 v-if v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。 <h1 v-if"awesome">Vue is awesome!</h1>v-else 你也可以使用 v-else 为 v-if 添加一个“else 区块”。 <h1 v-if"awesome"&g…

什么品牌的猫粮比较好?主食冻干猫粮品牌十大排行

咱们养猫人每天最愁的就是咋给自家猫咪选一款优质的猫粮&#xff0c;让猫主子吃了健健康康的。早些年大多养猫人的标准就是盯着进口的买&#xff0c;所以之前进口猫粮的销量一直遥遥领先&#xff0c;感觉品控也严&#xff0c;也就放心大胆的冲进口猫粮了&#xff0c;但近期百利…

34.用过JavaConfig方式的spring配置吗?它是如何替代xml的?

用过JavaConfig方式的spring配置吗?它是如何替代xml的? 基于Java的配置,允许你在少量的Java注解的帮助下,进行你的大部分Spring配置而非通过XML文件。 以@Configuration 注解为例,它用来标记类可以当做一个bean的定义,被Spring IOC容器使用。 另一个例子是@Bean注解,它…

【开题报告】基于SpringBoot的艺术类家教平台的设计与实现

1.选题背景 随着人们生活水平的提高和文化教育的重视&#xff0c;越来越多的家长开始注重孩子的艺术教育&#xff0c;希望让孩子在绘画、音乐、舞蹈等方面得到更加专业的指导和培养。 然而&#xff0c;市场上现有的艺术类家教资源不够丰富和专业&#xff0c;家长们很难找到合…

flink中如何把DB大表的配置数据加载到内存中对数据流进行增强处理

背景 在处理flink的数据流时&#xff0c;比如处理商品流时&#xff0c;一般我们从kafka中只拿到了商品id&#xff0c;此时我们需要把商品的其他配置信息比如品牌品类等也拿到&#xff0c;此时就需要关联上外部配置表来达到丰富数据流的目的&#xff0c;如果外部配置表很大&…

我的隐私计算学习——隐私集合求交(1)

笔记内容来自多本书籍、学术资料、白皮书及ChatGPT等工具&#xff0c;经由自己阅读后整理而成。 &#xff08;一&#xff09;PSI的介绍 隐私计算关键技术&#xff1a;隐私集合求交&#xff08;PSI&#xff09;原理介绍 隐私计算关键技术&#xff1a;隐私集合求交&#xff08…

在系统中查找重复文件

说在前面 &#x1f388;不知道大家对于算法的学习是一个怎样的心态呢&#xff1f;为了面试还是因为兴趣&#xff1f;不管是出于什么原因&#xff0c;算法学习需要持续保持。 一、题目描述 给你一个目录信息列表 paths &#xff0c;包括目录路径&#xff0c;以及该目录中的所有…

事务--03---TCC空回滚、悬挂、幂等解决方案

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 Seata TCC 模式设计思路TCC存在的问题1、空回滚以及解决方案解决方案&#xff1a; 2、幂等问题以及解决方案解决方案&#xff1a; 3、悬挂问题以及解决方案解决方案…

PCIe设备热插拔-理论篇

硬件层面理解热插拔 PRSNT1#和PRSNT2#信号与PCIe设备的热插拔相关。在基于PCIe总线的Add-in 卡中&#xff0c;PRSNT1# 和PRSNT2#信号直接相连&#xff0c;而在处理器主板中&#xff0c;PRSNT1#信号接地&#xff0c;而PRSNT2#信号通过上 拉电阻接为高。 不同的处理器系统处理PC…

【Mysql】InnoDB的表空间(九)

概述 表空间是一个在 InnoDB 中比较抽象的概念&#xff0c;对于系统表空间来说&#xff0c;对应着文件系统中一个或多个实际文件&#xff1b;而对于每个独立表空间来说&#xff0c;对应着文件系统中一个名为表名.ibd 的实际文件。可以把表空间想象成由很多个页组成的池子&…

【Unity 实用工具篇】| 游戏多语言解决方案,官方插件Localization 实现本地化及多种语言切换

前言 【Unity 实用工具篇】| 游戏多语言解决方案&#xff0c;官方插件Localization 实现本地化及多种语言切换一、多语言本地化插件 Localization1.1 介绍1.2 效果展示1.3 使用说明 二、 插件导入并配置2.1 安装 Localization2.2 全局配置 三、多语言映射表3.1 创建多语言文本配…

Python之面向对象程序设计

文章目录 1、类定义2、创建实例3、属性4、方法5、继承6、多态7、组合8、导入类 1、类定义 面向对象程序设计的一个关键性观念是将数据以及对数据的操作封装在一起&#xff0c;组成一个相互依存、不可分割的整体&#xff0c;即对象。对于相同类型的对象进行分类、抽象后&#x…

字符处理 C语言xdoj52

问题描述 从键盘输入一个字符&#xff0c;若为小写字母&#xff0c;则输出其对应的大写字母&#xff1b;若为大写字母&#xff0c;则输出对应的小写字母&#xff1b;其他字符原样输出。 输入说明 输入一个字符 输出说明 输出一个字符 输入样例 样例1输入 a 样例…

分布式块存储 ZBS 的自主研发之旅|元数据管理

重点内容 元数据管理十分重要&#xff0c;犹如整个存储系统的“大黄页”&#xff0c;如果元数据操作出现性能瓶颈&#xff0c;将严重影响存储系统的整体性能。如何提升元数据处理速度与高可用是元数据管理的挑战之一。SmartX 分布式存储 ZBS 采用 Log Replication 的机制&…

安装ingress-nginx

1、下载helm压缩包 wget https://get.helm.sh/helm-v3.2.3-linux-amd64.tar.gz2、解压 [rootk8s-master-10 helm]# tar -zxvf helm-v3.2.3-linux-amd64.tar.gz linux-amd64/ linux-amd64/README.md linux-amd64/LICENSE linux-amd64/helm3、进入linux-amd64 [rootk8s-maste…

论文修改润色平台 PaperBERT

大家好&#xff0c;今天来聊聊论文修改润色平台&#xff0c;希望能给大家提供一点参考。 以下是针对论文重复率高的情况&#xff0c;提供一些修改建议和技巧&#xff1a; 标题&#xff1a;论文修改润色平台――助力学术研究&#xff0c;提升论文质量 一、引言 在学术研究中&am…

复制粘贴——QT实现原理

复制粘贴——QT实现原理 QT 剪贴板相关类 QClipboard 对外通用的剪贴板类&#xff0c;一般通过QGuiApplication::clipboard() 来获取对应的剪贴板实例。 // qtbase/src/gui/kernel/qclipboard.h class Q_GUI_EXPORT QClipboard : public QObject {Q_OBJECT private:explici…

单片机——通信协议(FPGA+c语言应用之spi协议解析篇)

引言 串行外设接口(SPI)是微控制器和外围IC&#xff08;如传感器、ADC、DAC、移位寄存器、SRAM等&#xff09;之间使用最广泛的接口之一。本文先简要说明SPI接口&#xff0c;然后介绍ADI公司支持SPI的模拟开关与多路转换器&#xff0c;以及它们如何帮助减少系统电路板设计中的数…

ChatGLM大模型推理加速之Speculative Decoding

目录 一、推测解码speculative decoding 1、自回归解码 2、speculative decoding 3、细节理解 二、核心逻辑代码 1、算法流程代码 2、模型自回归代码 a、带缓存的模型自回归实现代码 b、优化版本带缓存的模型自回归实现代码 c、ChatGLM的past_key_values的回滚 三、…