Antd Select 添加中框

news2024/9/27 19:18:14

默认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:

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

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

transition: all 0.2s;

跟antd保持同步。

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

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

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

相关文章

1. Prism系列之数据绑定

Prism系列之数据绑定 文章目录 Prism系列之数据绑定一、安装Prism二、实现数据绑定三、更换数据源 一、安装Prism 创建一个WPF工程&#xff0c;创建名为 PrismNewSample 的WPF项目。 使用管理解决方案的Nuget包 在上面或许我们有个疑问&#xff1f; 为啥安装prism会跟Pri…

ICC2:如何调整floorplan原点位置

我正在「拾陆楼」和朋友们讨论有趣的话题,你⼀起来吧? 拾陆楼知识星球入口 使用virtuoso layout或calibredrv改变原点位置可以参考专栏文章: Virtuoso layout如何改变原点坐标 ICC2中改变原点位置需要使用move_block_orgin命令,使用方法如下: move_block_origin -to [lind…

Epicypher:CUTANA™ E. coli Spike-in DNA

来源于Escherichia coli&#xff08;E.coli&#xff09;的片段DNA可以用作核酸酶靶向切割和释放&#xff08;CUT&RUN&#xff09;的实验标准化的spike-in对照。产品CUTANA™ E. coli Spike-in DNA含有足够的材料&#xff0c;可用于100-200个CUT&RUN样本&#xff08;高丰…

Win10错误代码0x80070005的解决方法

在Win10电脑操作过程中&#xff0c;用户可能会遇到各种各样的问题&#xff0c;从而影响到自己正常使用电脑办公。现在&#xff0c;就有用户遇到了错误码0x80070005的提示&#xff0c;但不清楚具体的解决方法。下面小编给大家分享不同的解决方法&#xff0c;解决后Win10电脑就能…

唇彩行业分析:我国彩妆细分品类市场占比63%

唇部彩妆是指在唇部起到化妆修饰作用的产品&#xff0c;包括口红/唇膏、唇蜜/唇彩/唇釉、唇笔/唇线笔、唇泥四大类。总体来看&#xff0c;目前我国唇部彩妆细分品类主要集中在唇膏/口红、唇蜜/唇彩/唇釉。唇笔/唇线笔市场接受程度较低&#xff0c;这是由于唇笔/唇线笔的主要成分…

Git克隆远程仓库SSH

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 首先我们需要创建SSH Key 先进入用户主目录&#xff0c;在目录下查找有没有.ssh目录&#xff0c;没有则创建&#xff0c;然后进入目录&#xff0c;查看是否有id_rsa 和 id_rsa.pub 两个⽂件&#xff0c;一个是私钥&#xff…

自动转文字源码系统,随时随地自由转换,附带完整的搭建教程

互联网上的信息形式多种多样&#xff0c;其中文本是最基本也是最常见的信息形式之一。然而&#xff0c;这些文本往往是以HTML、XML、Markdown等格式存储和呈现的&#xff0c;对于用户来说&#xff0c;这些格式的文本可读性较差&#xff0c;难以直接编辑和使用。因此&#xff0c…

道路清障车行业分析:中国市场发展趋势研究

清障车全名为道路清障车&#xff0c;又称拖车、道路救援车、拖拽车&#xff0c;具有起吊、拽拉和托举牵引等多项功能&#xff0c;清障车主要用于道路故障车辆&#xff0c;城市违章车辆及抢险救援等。清障车按类别主要分为&#xff1a;拖吊连体型、拖吊分离型&#xff0c;一拖一…

vue前端访问Django channels WebSocket失败

现象 前端报错&#xff1a;SSH.vue:51 WebSocket connection to ‘ws://127.0.0.1:8000/server/terminal/120.59.88.26/22/1/’ failed: 后端报错&#xff1a;Not Found: /server/terminal/120.79.83.26/22/1/ 原因 django的版本与channels的版本不匹配&#xff08;django…

es6从url中获取想要的参数

第一种方法 很古老&#xff0c;通过 split 方法慢慢截取&#xff0c;可行是可行但是这个方法有一个弊端&#xff0c;因为 split 是分割成数组了&#xff0c;只能按照下标的位置获取值&#xff0c;所以就是参数位置一旦发生变化&#xff0c;那么获取到的值也就错位了 let user…

Python框架批量数据抓取的高级教程

一、背景介绍 批量数据抓取是一种常见的数据获取方式&#xff0c;能够帮助我们快速、高效地获取网络上的大量信息。本文将介绍如何使用Python框架进行大规模抽象数据&#xff0c;以及如何处理这个过程中可能遇到的问题。 二、项目需求 我们将爬取大量知乎文章&#xff0c;讨…

【送书活动】探究AIGC、AGI、GPT和人工智能大模型

文章目录 前言01 《ChatGPT 驱动软件开发》推荐语 02 《ChatGPT原理与实战》推荐语 03 《神经网络与深度学习》推荐语 04 《AIGC重塑教育》推荐语 05 《通用人工智能》推荐语 后记赠书活动 前言 人工智能技术在过去几年中发展迅猛&#xff0c;得益于大数据、云计算、深度学习等…

论文润色改善附录内容质量 快码论文

大家好&#xff0c;今天来聊聊论文润色改善附录内容质量&#xff0c;希望能给大家提供一点参考。 以下是针对论文重复率高的情况&#xff0c;提供一些修改建议和技巧&#xff1a; 标题&#xff1a;论文润色改善附录内容质量――提升论文的完整性与可读性 一、引言 附录是论文的…

【MySQL】——数据类型及字符集

&#x1f383;个人专栏&#xff1a; &#x1f42c; 算法设计与分析&#xff1a;算法设计与分析_IT闫的博客-CSDN博客 &#x1f433;Java基础&#xff1a;Java基础_IT闫的博客-CSDN博客 &#x1f40b;c语言&#xff1a;c语言_IT闫的博客-CSDN博客 &#x1f41f;MySQL&#xff1a…

【移动通讯】【MIMO】[P1]【科普篇】

前言&#xff1a; 前面几个月把CA 的技术总体复盘了一下,下面一段时间 主要结合各国一些MIMO 技术的文档,复盘一下MIMO. 这篇主要参考华为&#xff1a; info.support.huawei.com MIMO 技术使用多天线发送和接受信号。主要应用在WIFI 手机通讯等领域. 这种技术提高了系统容量&…

英飞凌芯片使用记录:程序运行放在RAM,规避ECC错误,操作Flash注意点

目录 1、程序放在RAM运行的方法&#xff08;Tasking&#xff09; 2、Tc3xx读取PF的时候关闭ECC错误方法 3、看门狗驱动放置在RAM避免总线错误。 4、Debug RAM与Debug Flash的区别 5、Tasking生成的HEX不是按照PFLASH的页大小作为start&#xff0c;或者存在多个程序块需要合…

第3次实验:802.11

第3次实验&#xff1a;802.11 目的&#xff1a; 探索802.11的物理层、链接层和管理功能。它被广泛用于将移动设备无线连接到互联网&#xff0c;并在课文的第4.4节中涉及。首先回顾该部分 环境&#xff1a; WireShark 实验报告正文 实验过程 本实验直接使用作者实验结果进行分析…

LeetCode刷题--- 二叉搜索树中第K小的元素

个人主页&#xff1a;元清加油_【C】,【C语言】,【数据结构与算法】-CSDN博客 个人专栏 力扣递归算法题 【 http://t.csdnimg.cn/yUl2I 】【C】 【 http://t.csdnimg.cn/6AbpV 】数据结构与算法 【 http://t.csdnimg.cn/hKh2l 】 前言&#…

Java版本+鸿鹄企业电子招投标系统源代码+支持二开+Spring cloud +鸿鹄电子招投标系统

项目说明 随着公司的快速发展&#xff0c;企业人员和经营规模不断壮大&#xff0c;公司对内部招采管理的提升提出了更高的要求。在企业里建立一个公平、公开、公正的采购环境&#xff0c;最大限度控制采购成本至关重要。为了符合国家电子招投标法律法规及相关规范&#xff0c;…

北京陪诊系统|陪诊软件开发定制|陪诊系统开发核心功能

陪诊小程序源码是一款针对医院陪护和陪诊服务的综合性解决方案&#xff0c;旨在为患者提供方便、高效且的陪护和陪诊服务。该源码适用于各类医院、医疗机构和康复中心等场所&#xff0c;通过小程序实现患者、陪护和医生之间的便捷互动。 陪诊小程序定制功能&#xff1a; 1、用…