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,一经查实,立即删除!

相关文章

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

咱们养猫人每天最愁的就是咋给自家猫咪选一款优质的猫粮&#xff0c;让猫主子吃了健健康康的。早些年大多养猫人的标准就是盯着进口的买&#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…

事务--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 创建多语言文本配…

字符处理 C语言xdoj52

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

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

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

论文修改润色平台 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的回滚 三、…

EM的理论基础

1 EM定义​ 电迁移(Electro-Migration)是指在外加电场下,电子和金属原子之间的动量转移导致材料的运动。这种动量传递导致金属原子(比如Cu原子)从其原始位置移位,如图7-1。这种效应随着导线中电流密度的增加而增加,并且在更高的温度下,动量传递变得更加严重。因此,在先…

[WMCTF2020]Make PHP Great Again require_once 特性

php源码分析 require_once 绕过不能重复包含文件的限制-安全客 - 安全资讯平台 这里是特性 我们首先来解释一下 <?php highlight_file(__FILE__); require_once flag.php; if(isset($_GET[file])) {require_once $_GET[file]; }这个是我们的源代码 PHP包含的格式是将 已…

考验的是技术!如何绕过微软设计的安装Windows 11的硬件要求

这篇文章解释了绕过微软设计的硬件要求的三种方法,允许你在几乎任何电脑上安装Windows 11。 注意:绕过Windows 11要求所涉及的一些过程需要更深入的技术知识。请不要编辑计算机的注册表,除非你对此乐此不疲,因为它可能会损坏你的设备。 绕过Windows 11要求 虽然绕过Wind…

AUTO.js连接电脑时,握手失败

使用模拟器上的autox.js连接vscode。ipv4正确&#xff0c;但总是握手失败。 检查了一下vscode安装的插件&#xff0c;最开始安装的是这个&#xff1a; 将之前安装的插件禁用。 更换这个插件&#xff1a; 然后启动服务后就可以连接成功了。

Nginx服务器配置SSL证书

本文将全面介绍如何在Nginx或Tengine服务器配置SSL证书&#xff0c;具体包括下载和上传证书文件&#xff0c;在Nginx上配置证书文件、证书链和证书密钥等参数&#xff0c;以及安装证书后结果的验证。成功配置SSL证书后&#xff0c;您将能够通过HTTPS加密通道安全访问Nginx服务器…

成分党品牌

现在越来越多的成分党品牌崛起&#xff0c;主打成分护肤&#xff0c;不添加任何成分&#xff0c;其中有Timeless、The Ordinary、John Jeff、欧邦琪&#xff08;Obagi&#xff09;、修丽可&#xff08;SkinCeuticals&#xff09;、HFP 。 参考文章&#xff1a;成分党都会良心推…

试以单链表为存储结构实现简单选择排序的算法

简单选择排序&#xff0c;就是每趟把剩余元素最小或者最大的选出来排到前面 这道题值得推敲的是&#xff0c;p作为一个链表结点也是可以作为for循环的初始条件和判断条件的&#xff0c;至于查找到最小值之后&#xff0c;可以把两者的数值进行一个交换&#xff0c;就不用删结点…