ant-design-vue修改input组件样式

news2024/11/30 14:45:52

问题场景
不得不说ant-design-vue的样式是真的难改。。。今天尝试了很多种方案,都无疾而终。最终,通过全局scss文件引入的方式解决了。
几种方案:

  1. 直接行内样式,发现部分可以,部分不行
  2. 将style 的scoped属性去掉,可以直接修改,但是会影响到其他组件的样式。
  3. 利用::v-deep(vue3.0中可以使用:deep())进行深度修改结果和方法2一样的。
  4. 此外,还有/deep/、>>>等等样式穿透的方法都可以修改样式,但都不太好效果。

过程
● 右键检查元素(F12)
● 在组件中,自定义类名home-ant-input
在这里插入图片描述

● 找到要修改的类名,如图,这里我是修改input组件的样式就是.home-ant-input.ant-input-affix-wrapper .ant-input
在这里插入图片描述

● 新建一个global.scss文件,并且在main.js下挂载
● 在global.scss 文件,写入自己要修改的样式

.home-ant-input.ant-input-affix-wrapper .ant-input {
  background-color: red;
}

● 查看效果,可以发现修改成功,且其他Input组件样式没有受到影响。

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

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

相关文章

非线性负载的主要分类及其特性

非线性负载的主要分类 通常而言,由线性元件原件组成的负载称为线性负载,线性负载的输出与输入呈线性关系,典型的线性负载如电阻、电容和电感等;而由非线性元件构成的负载为非线性负载,在正弦波电压供电时会产生非正弦…

Sentinel服务流控

Sentinel通过流量控制(flow control)以及熔断降级来保护系统资源 QPS超过阈值直接失败 流量控制(flow control),其原理是监控应用流量的 QPS 或并发线程数等指标,当达到指定的阈值时对流量进行控制&#x…

如何使用ABAQUS对新能源动力电池进行Pack分析

电池Pack的仿真,按照系统层次,可从电芯、模组、Pack和整车逐级分析。电芯主要集中于机械性能的材料拟合、激光焊接以及电-化学-热-机耦合建模,模组主要集中于跌落、振动以及模组冷却,Pack主要集中于**、冲击和振动以及Pack热管理&…

Token Merging: Your ViT But Faster

论文:https://arxiv.org/pdf/2210.09461.pdf 代码: https://github.com/facebookresearch/ToMe 这篇论文写的很棒呀,以摘要为例,第一句话指明ToMe的作用(提高ViT-based模型的训练和推理速度)和特色&#x…

java面试强基(21)

什么是线程和进程? 何为进程? ​ 进程是程序的一次执行过程,是系统运行程序的基本单位,因此进程是动态的。系统运行一个程序即是一个进程从创建,运行到消亡的过程。 ​ 在 Java 中,当我们启动 main 函数时其实就是启动了一个 J…

提质增效!北京筑龙助力蒙牛集团采招数智化升级

近两年,全球经济下行压力加剧,市场形势波动使得集团企业面临着很大的经营压力。随着数字经济时代的到来,利用数字技术重构价值链、重组业务流程,或创建新的生态系统平台成为集团企业数字化转型的契机。 蒙牛电子采购招标平台作为…

WEB网页设计期末作业个人主页——基于HTML+CSS制作个人简介网站

🎉精彩专栏推荐👇🏻👇🏻👇🏻 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业…

现实中的项目范围变更

大多数招投标或签合同的项目(TOG或TOB),范围变更是极少的,一旦发起范围变更申请,这个流程是非常复杂的,而且会有负面影响,尤其是TOG的项目。 项目范围变更,往往会引起项目金额变更,核减、增加、不变都有可能。 TOG项目的范围变更,常是因为政策变了、上级要求等不可…

(附源码)Springboot网上购物平台 毕业设计 141422

Springboot网上购物平台的开发 摘 要 随着Internet的使用越来越广泛,在传统的商业模式中,对于日常各类商品,人们习惯于到各种商家店铺购买。然而在快节奏的新时代中,人们不一定能为购买各类商品腾出时间,更不会耐心挑…

Docker管理工具Portainer忘记admin登录密码怎么办?

Portainer官网解决方法链接 https://docs.portainer.io/v/ce-2.11/advanced/reset-admin 炒鸡详细步骤! 1.查看所有容器,包括未运行的 docker ps -a 2.找到Portainer对应信息 3.停止Portainer容器 docker stop portainerid 我这里就应该是 docker stop 507566…

Unity VFX图表初级到中级教程

Unity VFX图表初级到中级教程 从 Unity 学习新的视觉效果工具并开始制作一些很棒的魔法效果 课程英文名:Unity VFX Graph - Beginner To Intermediate 此视频教程共4.5小时,中英双语字幕,画质清晰无水印,源码附件全 下载地址 …

【脚本项目源码】Python制作提升成功率90%的表白神器

前言 明天就是拥抱情人节,情侣们会在公开的场合拥抱,向世人宣告你俩的爱意,也让这个寒冷的冬天变得格外温馨。到了年底依然能热情拥抱,也见证了两人情意如昔。 今天小鱼就给大家带来就是的利用Python制作表白神器,记…

年末消费高峰,警惕“大牌平替”的陷阱

就在眼前的双十二,接踵而来的圣诞跨年与春节,买买买的黄金时段,作为消费者,少不了要接受各式营销广告的狂轰滥炸。如今纷繁复杂的消费市场,大家都擦亮了眼睛追求性价比,如果你也曾被“五分之一价格买到大牌…

【云计算与大数据计算】分布式处理CPU多核、MPI并行计算、Hadoop、Spark的简介(超详细)

一、CPU多核和POISX Thread 为了提高任务的计算处理能力,下面分别从硬件和软件层面研究新的计算处理能力 在硬件设备上,CPU 技术不断发展,出现了SMP(对称多处理器)和 NUMA(非一致 性内存访问)两种高速处理的 CPU 结构 在软件层面出现了多进程和多线程编程。进程…

【王道计算机网络笔记】网络层-网络层概述和编址

文章目录IP数据报格式IP数据报分片例题IPv4地址分类的IP地址网络地址转换NAT子网划分与子网掩码无分类编址CIDR主要任务是把分组从源端传到目的端,为分组交换网上的不同主机提供通信服务。网络层的传输单位是数据报,数据报是一个比较长的数据&#xff0c…

基于51单片机的智能热水器无线WiFi控制系统proteus仿真原理图程序

功能: 0.本项目采用STC89C52作为单片机系统的控制MCU 1.LCD1602液晶实时显示温度阈值、当前温度和定时时间 2.支持按键和红外遥控设置温度阈值和定时时间 3.通过传感器检测,判定当前值是否超过设定的阈值,然后对相关继电器进行控制 4.支持声光…

使用DevExpress WPF主题设计器轻松创建Office 2019绿色主题(二)

DevExpress WPF拥有120个控件和库,将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpress WPF能创建有着强大互动功能的XAML基础应用程序,这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。 DevExpress WPF的The…

数据结构C语言版 —— 时间复杂度空间复杂度概念和计算

文章目录时间复杂度&空间复杂度1. 算法效率2. 时间复杂度1) 时间复杂度的概念2) 大O的渐近表示法3) 时间复杂度案例举例3. 空间复杂度1) 空间复杂度概念2) 计算实例时间复杂度&空间复杂度 1. 算法效率 算法效率分析一般分为两种,一种是时间效率&#xff0…

Unity初学者Shader Graph教程

Unity初学者Shader Graph教程 了解面向非程序员的 Unity 引擎可视化着色器编程工具的来龙去脉 课程英文名:Your Ultimate Guide to Shader Graph for Beginners 此视频教程共28.0小时,中英双语字幕,画质清晰无水印,源码附件全 …

基于C++实现(WinForm)家谱管理系统【100010033】

⼀、需求分析 《家谱管理系统》程序的设计⽬的,是为了解决中国传统家谱不易保存、不易修改、不易统计的缺陷。利⽤计算机程序,可以实现在计算机上存储、管理、查看家谱的相关信息。 ⽬标功能: 建⽴家谱:在计算机上建⽴树状家谱结…