Vue样式不生效 如何解决它

如果使用了scoped后,无法修改第三方UI组件库组件的样式,这里可以使用css深度作用选择器,以作样式修改。

在Vue项目中,经常需要使用如elementUI、vant、 iview等组件库,都可能自定义一些样式文件,但是有些样式直接在组件中修改无效,因为scoped局限于当前组件,去掉scoped的话又会影响全局样式。针对这种情况,可以使用深度作用选择器(即样式穿透)

可以使用:

<style scoped></style>

选择器能够作用得“更深”,可以影响到内部子组件

如果项目使用的是css 原生样式,那么你可以直接使用 穿透修改即可

<style scoped>
/*编译前*/
.a >>> .b { }/*编译后*/
.a[data-v-f3f3eg9] .b {}
</style>

vue项目中用到了预处理器 scss 、sass、less 操作符  可能会因为无法编译而报错 。可以使用 /deep/穿透即可,但是vue-cli3可能会导致变异报错。这个时候用::v-deep

<style lang="scss" scoped>
/*用法1*/
.a {/deep/ .b { }
} 
/*用法2*/
.a /deep/ .b { }.button-box{/deep/ .el-button{padding: 13px 50px;}}
</style>

::v-deep 在预处理器 scss 、sass、less 比较通用 如果使用了预处理器都可以使用 ::v-deep。::v-deep与 /deep/都是深度选择器,都能实现对组件内部的样式修改, ::v-deep的记载速度更快,在scss中使用/deep/会报loader错误,这时可以使用::v-deep来代替:

<style lang="scss" scoped>
/*用法1*/
.a{::v-deep .b { color:red; }
} 
/*用法2*/
.a ::v-deep .b { color:red;}
</style>

原创作者:吴小糖

创作时间:2023.11.23

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

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

相关文章

SQL LIKE 运算符:用法、示例和通配符解释

SQL中的LIKE运算符用于在WHERE子句中搜索列中的指定模式。通常与LIKE运算符一起使用的有两个通配符&#xff1a; 百分号 % 代表零个、一个或多个字符。下划线 _ 代表一个单个字符。 以下是LIKE运算符的用法和示例&#xff1a; 示例 选择所有以字母 “a” 开头的客户&#x…

Postman接口测试工具完整教程

前言 作为软件开发过程中一个非常重要的环节&#xff0c;软件测试越来越成为软件开发商和用户关注的焦点。完善的测试是软件质量的保证&#xff0c;因此软件测试就成了一项重要而艰巨的工作。要做好这项工作当然也绝非易事。 第一部分&#xff1a;基础篇 postman:4.5.1 1.安…

【成功案例】7日ROI超65%!注册率超85%!雷霆网络 联手 NetMarvel 实现效果翻倍增长!

雷霆网络旗下多款角色扮演手游在国内长期霸占买量榜前列&#xff0c;而这股“买量大户”的风依旧吹到了海外&#xff0c;其中《地下城堡3》依靠买量在境外业务收入上增长明显&#xff0c;目前市场潜力巨大。 然而&#xff0c;面对竞争激烈的PRG游戏出海局面&#xff0c;打开市…

12.docker的网络-host模式

1.docker的host网络模式简介 host模式下&#xff0c;容器将不会虚拟出自己的网卡、配置IP等&#xff0c;而是使用宿主机的IP和端口&#xff1b;也就说&#xff0c;宿主机的就是我的。 2. 以host网络模式创建容器 2.1 创建容器 我们仍然以tomcat这个镜像来说明一下。我们以h…

QSplitter分裂器

QSplitter QSplitter 是 Qt 框架提供的一个小部件&#xff08;widget&#xff09;&#xff0c;用于在用户界面中创建可拖动的分割窗口&#xff0c;允许用户调整子部件的大小和布局。它可以将父部件分割为多个可调整大小的子部件&#xff0c;使用户能够自定义界面的布局和大小。…

2024年跨境电商黄金赛道预测来了!跨境电商首选平台和品类有哪些?

跨境电商作为外贸新常态&#xff0c;在2023年已逐渐进入稳定增长的发展阶段&#xff0c;想必2024年跨境电商也会是一个向好的发展趋势&#xff0c;2024年做跨境电商&#xff0c;找准适合自己的电商平台和产品是成功的关键&#xff0c;今天东哥就对2024年的跨境电商黄金赛道做一…

Kotlin中 for in 是有序的吗?forEach呢?

我们要遍历一个数组、一个列表&#xff0c;经常会用到kotlin的 for in 语法&#xff0c;但是 for in 是不是有序的呢&#xff1f;forEach是不是有序的呢&#xff1f;这就需要看一下它们的本质了。 数组的 for in // 调用&#xff1a; val arr arrayOf(1, 2, 3) for (ele in …

安卓现代化开发系列——从生命周期到Lifecycle

由于安卓已经诞生快二十载&#xff0c;其最初的开发思想与现代的开发思想已经大相径庭&#xff0c;特别是Jetpack库诞生之后&#xff0c;项目中存在着新老思想混杂的情况&#xff0c;让许多的新手老手都措手不及&#xff0c;项目大步向屎山迈进。为了解决这个问题&#xff0c;开…

P6 C++控制流语句(continue, break, return)

前言 今天我们讲的是控制流语句&#xff0c;本期内容是上期课程的延续。 控制流语句一般与循环语句一起工作&#xff0c;它们让我们可以更好的控制这些循环的实际运行。 我们有三个主要的控制流语句可以使用&#xff0c;continue 、break 和 return&#xff0c;它们有不同的…

Python 订阅 image_transport 压缩后的深度图 compressedDepth

image_transport 是ros的一个图像处理工具,可以很方便地进行图像数据的压缩,可惜它目前并不支持python 当你如下安装了image_transport及其plugin后 sudo apt install ros-foxy-image-transport*运行 ros2 run image_transport list_transports可看到如下内容 Declared tr…

打印楼梯,同时在楼梯上方打印两个笑脸。

#include<stdio.h> int main() { int i,j; printf("\1\1\n"); /*输出两个笑脸*/ for(i1;i<11;i) { for(j1;j<i;j) printf("%c%c",219,219); printf("\n"); } return 0; }

【C++】POCO学习总结(五):功能介绍

【C】郭老二博文之&#xff1a;C目录 1、POCO 简介 github&#xff1a;https://github.com/pocoproject/poco 官网&#xff1a;https://pocoproject.org/index.html POCO第一个版本于 2005 年 2 月发布 POCO完全免费&#xff1a;POCO C 库根据 Boost 软件许可证获得许可。非…

QMI8658A(6轴)-EVB 评估板-使用说明书

QMI8658A6<6轴>-EVB 评估板-使用说明书 0.前言 1.硬件准备 1.1 I2C 接口 1.2 USART 接口 1.3 引脚序号功能定义 2.程序运行 0.前言 【相关博文】 【QMI8658 - 姿态传感器学习笔记 - Ⅰ】 【QMI8658 - 姿态传感器学习笔记 - Ⅱ】 【QMI8658 - 姿态传感器学习…

基于单片机的光伏发电并网系统设计(论文+源码)

1.系统设计 片作为主控制器。由于太阳能板本身的能量输出受到负载影响&#xff0c;因此需要在太阳能板后面加入一级DC/DC电路&#xff0c;来实现最大功率跟踪&#xff0c;以提高整个系统的效率。接着&#xff0c;由于光伏逆变器需要产生220V的交流电给居民使用&#xff0c;因此…

[MySQL] MySQL 表的增删查改

本篇文章对mysql表的增删查改进行了详细的举例说明解释。对表的增删查改简称CRUD : Create(创建), Retrieve(读取)&#xff0c;Update(更新)&#xff0c;Delete&#xff08;删除&#xff09;。其中重点是对查询select语句进行了详细解释&#xff0c;并且通过多个实际例子来帮助…

香港科技大学广州|先进材料学域博士招生宣讲会—华中科技大学大学专场!!!(暨全额奖学金政策)

“跨学科融合创新&#xff0c;引领新兴与未来行业的突破与发展——先进材料学域” 世界一流的新型可持续材料创新研究 夯实的先进材料领域国际学术影响力 教授亲临现场&#xff0c;面对面答疑解惑助攻申请&#xff01; 一经录取&#xff0c;享全额奖学金1.5万/月&#xff01; …

【性能优化】JVM调优与写出JVM友好高效的代码

&#x1f4eb;作者简介&#xff1a;小明java问道之路&#xff0c;2022年度博客之星全国TOP3&#xff0c;专注于后端、中间件、计算机底层、架构设计演进与稳定性建设优化&#xff0c;文章内容兼具广度、深度、大厂技术方案&#xff0c;对待技术喜欢推理加验证&#xff0c;就职于…

面试:Kafka相关问题

文章目录 简单介绍kafkakafka应用场景为什么需要zookeeperZookeeper 对于 Kafka 的作用是什么&#xff1f;kafka高效的原因kafka的特点kafka的核心组成Kafka中的Topic和Partition有什么关系&#xff1f;Kafka的消费消息是如何传递的&#xff1f;Kafka 的多副本机制了解吗&#…

STM32:基本定时器原理和定时程序

一、初识定时器TIM 定时器就是计数器&#xff0c;定时器的作用就是设置一个时间&#xff0c;然后时间到后就会通过中断等方式通知STM32执行某些程序。定时器除了可以实现普通的定时功能&#xff0c;还可以实现捕获脉冲宽度&#xff0c;计算PWM占空比&#xff0c;输出PWM波形&am…

Vue3 + Vite + TSX + vue3-ace-editor 踩坑

前言 由于 ace-editor 官网并没有提供各个前端框架Vue&#xff0c;React&#xff0c;Angular的直接使用的适配版本&#xff0c; 所以本次使用的vue3-ace-editor 是个人开源者维护的版本&#xff0c;原生是支持 SFC 模版用的&#xff0c;由于我这里习惯使用 JSX 或 TSX的方式&a…