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:

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

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

transition: all 0.2s;

跟antd保持同步。

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

使用cdn加速导致Vue.js devtools 工具不能使用

打包分析 npm run preview -- --report发现 element-ui mock.js&#xff08;模拟数据&#xff09; cos-js-sdk-v5.js&#xff08;腾讯云上传&#xff09;过大使用cdn加速 2. cdn 加速 webpack排除打包 vue.config.js configureWebpack: {name: name,resolve: {alias: {: reso…

Mybatis-Plus之内置接口(一起了解Mybatis-Plus的内置接口)

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是君易--鑨&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的博客专栏《SpringBoot开发之Mybatis-Plus系列》。&#x1…

Python使用HTTP库发送GET请求的示例——轻松探索网络世界

大家好&#xff0c;今天我要给大家介绍一个非常实用的Python库——HTTP库&#xff0c;它可以帮助我们轻松地发送HTTP请求。今天&#xff0c;我们就来学习一下如何使用HTTP库发送GET请求。 首先&#xff0c;我们需要安装HTTP库。如果你还没有安装&#xff0c;可以通过pip命令进…

补题与总结:AtCoder Beginner Contest 333 D、E

文章目录 写在最前面的复盘D - Erase LeavesE - Takahashi Quest 写在最前面的复盘 前三题属于是凑数题&#xff0c;下次争取快点a掉&#xff0c;这次wa了一次 C题写了个三指针&#xff0c;从小到大枚举出满足题意的数&#xff0c;其实可以直接暴力枚举满足题意的数&#xff0c…

Vue框架入门(项目搭建)

VUE文档 https://cn.vuejs.org/guide/introduction.html SFC名词介绍 SFC即 *.vue 文件&#xff0c;英文 Single-File Component&#xff0c;简称 SFC 每一个 *.vue 文件都由三种顶层语言块构成&#xff1a;<template>、<script> 和 <style> template​ 每个…

【git学习笔记 01】打标签学习

文章目录 一、声明二、对标签的基本认知什么是标签&#xff1f;为什么要打标签&#xff1f;如何生成类似github中readme的图标 三、标签相关命令四、示例操作 一、声明 本帖持续更新中如有纰漏&#xff0c;望批评指正&#xff01;参考视频链接&#xff0c;非常感谢原作者&…

houdini 神经网络

实现个神经网络的3D可视化&#xff0c;美爆了&#xff01;-腾讯云开发者社区-腾讯云 https://vimeo.com/stefsietz GitHub - julrog/nn_vis: A project for processing neural networks and rendering to gain insights on the architecture and parameters of a model throu…

天锐绿盾透明加密防泄密系统的功能有哪些

PC端访问地址&#xff1a;www.drhchina.com 天锐绿盾透明加密防泄密系统的功能主要包括以下几点&#xff1a; 透明加解密&#xff1a;该系统采用文件过滤驱动实现透明加解密&#xff0c;这意味着用户在使用过程中完全感觉不到加密和解密的过程&#xff0c;不会影响用户的操作习…

xcode无线真机调试详细图文步骤

步骤一、 步骤二&#xff1a; 步骤三&#xff1a; 配置完到这里&#xff0c;点击真机右键&#xff0c;菜单栏并未出现connect via ip address 选项&#xff0c;也没出现无线连接的小地球图标&#xff0c;别慌&#xff0c;接着进行下一步操作即可。 步骤四&#xff1a; 1.打开…

单片机计数功能

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、计数器是什么&#xff1f;1.1 应用 二、计数器原理框图及对输入信号的要求2.1 原理框图2.2对输入信号的要求 三、使用步骤3.1 配置为计数模式3.2 装初值3.3…

进制转换(二进制、八进制、十进制、十六进制)

目录 进制转换进制有哪些&#xff1f;二进制八进制&#xff1a;十进制&#xff1a;十六进制&#xff1a; 进制转换 随便记录下&#xff0c;仅供参考。 进制有哪些&#xff1f; 进制一般就只包括&#xff1a;二进制、八进制、十进制 和 十六进制 二进制&#xff1a;逢 二 进…

力扣题:数字与字符串间转换-12.19

力扣题-12.19 [力扣刷题攻略] Re&#xff1a;从零开始的力扣刷题生活 力扣题1&#xff1a;443. 压缩字符串 解题思想&#xff1a;通过双指针进行遍历即可 class Solution(object):def compress(self, chars):""":type chars: List[str]:rtype: int"&quo…

Springboot+Mybatis入门案例

一、项目结构 1.导入依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apach…

Meta与Ray-Ban合作推出了一款全新智能眼镜外观时尚,而且搭载了能够“看到“你所看到的一切的人工智能技术

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

骨传导耳机和开放式耳机有什么区别?一文读懂骨传导耳机和开放式的关系!

先说结论&#xff0c;骨传导耳机和气传导耳机两者都属于是开放式耳机&#xff0c;开放式耳机指的是开放双耳佩戴的耳机&#xff01; 开放式耳机分为两种&#xff0c;分别是骨传导耳机和气传导耳机&#xff0c;虽然两者都属于开放式耳机&#xff0c;但它们的佩戴方式和传声原理…

SpringBoot接入轻量级分布式日志框架GrayLog

1.前言 日志在我们日常开发定位错误&#xff0c;链路错误排查时必不可少&#xff0c;如果我们只有一个服务&#xff0c;我们可以只简单的通过打印的日志文件进行排查定位就可以&#xff0c;但是在分布式服务环境下&#xff0c;多个环境的日志统一收集、展示则成为一个问题。目…

Relocations for this machine are not implemented,IDA版本过低导致生成汇编代码失败

目录 1、问题描述 2、安卓app发生崩溃&#xff0c;需要查看汇编代码上下文去辅助分析 3、使用IDA打开.so动态库文件&#xff0c;提示Relocations for this machine are not implemented 4、IDA版本较老&#xff0c;不支持ARM64的指令集&#xff0c;使用7.0版本就可以了 5、…

ACM32如何保护算法、协议不被破解或者修改

ACM32具有以下几种功能&#xff0c;可以保护算法、协议不被破解或者修改。 1.存储保护  RDP读保护  WRP写保护  PCROP 专有代码读保护  MPU存储区域权限控制  Secure User Memory存储区域加密 2.密码学算法引擎  AES  HASH  随机数生成  …

Hugging Face实战-系列教程19:文本摘要建模实战1 之 数据清洗(中文商城评价数据处理方法)

&#x1f6a9;&#x1f6a9;&#x1f6a9;Hugging Face 实战系列 总目录 有任何问题欢迎在下面留言 本篇文章的代码运行界面均在Jupyter Notebook中进行 本篇文章配套的代码资源已经上传 文本摘要建模实战1 之 数据清洗 文本摘要建模实战2 之 Tokenizer处理 1 任务概述 1.1 任…

MATLAB求解微积分(代码+详细解读)

大多数实际工程问题常常简化为微分方程&#xff0c;其求解显地至关重要。 符号微积分 极限 % matlab提供的求极限函数limit(),其调用格式为 % y limit(fun,x,x0) % fun为要求解的函数&#xff0c;x为函数自变量&#xff0c;x0为函数自变量的取值&#xff0c;x趋近于x0 clc;…