antd-select组件样式,option下拉选中勾选样式,使用Drawer样式失效

注意:如果在使用抽屉Drawer组件时,在less写法中修改下拉样式ant-select-dropdown-menu不生效!检查是否设置Drawer组件getContainer属性是否为false

原因:

getContainer 属性决定了 Drawer 渲染的 HTML 节点位置,默认情况下,Drawer 会被渲染到 body 元素上。这样做的好处是避免了 Drawer 内容的样式受到外部容器样式的影响
当你设置了 getContainer={false},Drawer 将直接渲染在其父组件内,而不是作为 body 的直接子元素。这样做虽然可以让 Drawer 更好地融合进父组件的布局中,但是也可能导致一些层叠上下文(Stacking Context)或者样式继承的问题,尤其是当 Drawer 包含诸如下拉菜单这样需要==“溢出”==(overflow)的子组件时。

css

// select外部输入框样式
.ant-select-selection {background-color: red;color: red;
}// select下拉箭头以及关闭键样式
.ant-select-selection .anticon {color: red;
}// 下拉菜单的最外层容器的类名
.ant-select-dropdown {background-color:'#fff'color: red;
}
//这里可以修改鼠标选中!焦点!样式
.ant-select-dropdown,li {color: red;
}//下拉内容列样式
.ant-select-dropdown-menu-vertical li{color:red
} 
// 下拉选项的 hover 样式
.ant-select-dropdown-menu-item:hover {}// 下拉菜单选中的数据样式
.ant-select-dropdown-menu-item-selected{}// 自定义对号的颜色
.ant-select-dropdown-menu-item-selected svg {fill: red; /* 修改为期望的颜色 */
}
.ant-select-dropdown-menu-item:hover svg{}

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

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

相关文章

哪些公司在招聘GIS开发?为什么?

之前我们给大家整理汇总了WebGIS在招岗位的一些特点,包括行业、学历、工作经验等。WebGIS招聘原来看重这个!整理了1300多份岗位得出来的干货! 很多同学好奇,这些招GIS开发的都是哪些公司?主要是做什么的? …

Java学习笔记11——内部类的继承与覆盖及总结

1、内部类的继承: 由于创建内部类对象的时候需要外部类的对象,所以在继承内部类的时候情况会比较复杂,需要确保内部类对象与外部类对象之间的引用正确建立,为了解决这个问题,Java提供了一种特殊的语法,来说…

Cesium 自定义Primitive - 圆

一、创作思路 1、创建一个自定义CustomPrimitive 2、然后根据两个点,生成圆 3、方便后期绘制圆 二、实现代码 1、在vue的包中加入turf. npm install turf/turf 1、创建一个CustomCirclePrimitive类,并加入更新的代码 export default class CustomCirclePrimitive …

vue3 对于watch的再次理解 给响应式变量赋相同值时watch不会被触发。

问题 当我给响应式变量赋相同值时watch不会被触发。 之前一直对于watch的理解是会被频繁触发,值变化就会被执行,反之computed会缓存相同值。 看官方文档也没有相关说明,加上赋相同值的场景占少数 结论 在 Vue 3 中,watch 函数默…

钉钉登录前端处理

可参考官网&#xff1a;扫码登录第三方网站 - 钉钉开放平台 方式一&#xff1a;网站将钉钉登录二维码内嵌到自己页面中 <script src"https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script> 在需要使用钉钉登录的地方实例以下JS对象 …

【Simulink系列】——控制系统仿真基础

声明&#xff1a;本系列博客参考有关专业书籍&#xff0c;截图均为自己实操&#xff0c;仅供交流学习&#xff01; 一、控制系统基本概念 这里就不再介绍类似于开环系统、闭环系统等基本概念了&#xff01; 1、数学模型 控制系统的数学模型是指动态数学模型&#xff0c;大致…

车辆伤害VR安全教育培训复用性强

VR工地伤害虚拟体验是一种新兴的培训方式&#xff0c;它利用虚拟现实技术为参与者提供身临其境的体验。与传统的培训方式相比&#xff0c;VR工地伤害虚拟体验具有许多优势。 首先&#xff0c;VR工地伤害虚拟体验能够模拟真实的工作环境和事故场景&#xff0c;让参与者在安全的环…

基于单片机的晾衣架控制系统设计

目 录 摘 要 I Abstract II 引 言 1 1 系统方案设计 3 1.1 系统方案论证 3 1.2 系统工作原理 4 2 硬件设计 5 2.1 单片机 5 2.2 按键设计 7 2.3 光线检测模块 8 2.4 雨滴检测模块 9 2.5 电压比较器 10 2.6 微动步进电动机 11 2.7 硬件电路原理图 12 3 系统主要软件设计 14 3.1…

Python常用语法汇总(一):字符串、列表、字典操作

1. 字符串处理 print(message.title()) #首字母大写print(message.uper()) #全部大写print(message.lower()) #全部小写full_name "lin" "hai" #合并字符串print("Hello, " full_name.title() "!")print("John Q. %s10s&qu…

买不到的数目c++

题目 输入样例&#xff1a; 4 7输出样例&#xff1a; 17 思路 一个字&#xff0c;猜。 一开始不知道怎么做的时候&#xff0c;想要暴力枚举对于特定的包装n, m&#xff0c;最大不能买到的数量maxValue是多少&#xff0c;然后观察性质做优化。那么怎么确定枚举结果是否正确呢…

程序员的职业路径:如何选择适合自己的职业方向?

在当今数字化时代&#xff0c;作为一名程序员&#xff0c;选择正确的职业赛道至关重要。随着技术的迅速发展和市场的竞争加剧&#xff0c;程序员们需要认真思考自己的职业方向&#xff0c;并做出明智的决策。 自我评估与兴趣探索 首先&#xff0c;程序员们应该对自己进行深入…

主题乐园如何让新客变熟客,让游客变“留客”?

群硕跨越时间结识了一位爱讲故事的父亲&#xff0c;他汇集了一群幻想工程师&#xff0c;打算以故事为基础&#xff0c;建造一个梦幻的主题乐园。 这个乐园后来成为全球游客最多、收入最高的乐园之一&#xff0c;不仅在2023财年创下了近90亿&#xff08;美元&#xff09;的营收…

[渗透教程]-022-内网穿透的高性能的反向代理应用

frp 简介 frp 是一个专注于内网穿透的高性能的反向代理应用,支持 TCP、UDP、HTTP、HTTPS 等多种协议。可以将内网服务以安全、便捷的方式通过具有公网 IP 节点的中转暴露到公网。 项目地址 https://github.com/fatedier/frp安装 linux 配置方式见如下链接🔗 frp安装配置…

Kubernetes 二进制部署 《easzlab / kubeasz项目部署》- 03-安装容器运行时

Kubernetes 二进制部署 《easzlab / kubeasz项目部署》 03-安装容器运行时 03-安装容器运行时 项目根据k8s版本提供不同的默认容器运行时&#xff1a; k8s 版本 < 1.24 时&#xff0c;支持docker containerd 可选 k8s 版本 > 1.24 时&#xff0c;仅支持 containerd[roo…

亚马逊认证考试系列 - 知识点 - EMR简介

一、AWS EMR 简介 AWS EMR 是 Amazon Web Services 的托管 Hadoop 框架&#xff0c;它简化了在云中处理大规模数据的过程。EMR 支持基于 Hadoop、Spark、Presto 和其他大数据技术的分布式计算框架。主要特性和优势弹性伸缩&#xff1a;根据工作负载的需要自动扩展或收缩计算集…

vue2实现拖拽排序效果

1、首先下载 vuedraggable 插件 npm i -S vuedraggable2、使用方法 <template><div><div style"display: flex; justify-content: center; align-items: center"><div style"width: 120px; height: 60px; line-height: 60px; text-align…

独家揭秘:AI大模型在实践中的应用!

在当今社会&#xff0c;人工智能技术被广泛应用于各行各业。其中&#xff0c;AI大模型作为人工智能领域的热门话题&#xff0c;正逐渐成为现实生活中的重要应用。AI大模型是一种基于深度学习和神经网络技术的计算机模型&#xff0c;能够通过大规模数据的训练和学习&#xff0c;…

利用小红书笔记利用小红书笔记API:开发者的内容创新利器

小红书是一个备受欢迎的社交平台&#xff0c;它为用户提供了分享购物心得、旅行体验、美妆技巧等内容的平台。对于开发者来说&#xff0c;小红书笔记API&#xff08;如果开放的话&#xff09;可以是一个强大的工具&#xff0c;用于实现内容创新、数据分析以及用户互动等多种功能…

dpdk-vdpa中QEMU热迁移脏页log内存的分配和传递流程

migration_thread qemu_savevm_state_setup ram_save_setup ram_init_all ram_init_bitmaps memory_global_dirty_log_start //全局标脏 MEMORY_LISTENER_CALL_GLOBAL(log_global_start, Forward); .log_global_start = vhost_log_global_start, vhost_migration_logvhost_dev_…

SpringMVC-异步调用,拦截器与异常处理

1.异步调用 1.发送异步请求 <a href"javascript:void(0);" id"testAjax">访问controller</a> <script type"text/javascript" src"js/jquery-3.7.1.js"></script> <script type"text/javascript&qu…