vue中修改第三方组件样式_vue 修改渲染在app外的组件样式-程序员宅基地

技术标签: css  样式不生效  vue  前端  

    场景:我们在使用antdesign、elementui等第三方组件库时,通常都要对其中组件的样式进行调整,以适应页面整体的风格。而有时我们写的样式并不会对第三方组件生效,下面将分析原因,并提供处理方案。

    原因:我们在写vue文件时,为了各页面的样式互不干扰,通常会在vue文件的style标签上,加上一个特殊的属性:scoped。使用这个属性后,该 组件中的所有dom会添加上一个类似唯一标识的动态属性,可以使得CSS样式就只适用于当前组件内的元素。也就是说,在样式为scoped的vue文件里写的样式,是会带上标识的,而第三方子组件内的dom并没有这个标识,所以就不会起作用了。

    解决

    方案1:使用样式穿透,即 /deep/,这样第三方组件也会加上标识,样式就可以生效了,参看下图。

    方案2: 将用于修改 第三方组件的样式,放在不带 scoped的 style标签中,使之成为全局样式。为了不污染全局中其他样式,可以在组件外层加上class 来区分隔离。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42230473/article/details/115307096

智能推荐

星际特攻队java_星际特攻队下载-星际特攻队游戏最新版v2.0.1-PChome下载中心-程序员宅基地

文章浏览阅读142次。星际特攻队游戏一款科幻风格的冒险游戏,你已经失去了记忆,降落在这片土地上。你必须聚集星际海盗,机械师和其他伙伴在这个未知的恒星领域开始一场太空星际冒险。在游戏中,玩家可以组建自己的团队,享受团队行动的冒险乐趣。游戏的剧情设定非常有意思,给玩家强烈的游戏代入感,让玩家进入游戏节奏。星际特攻队游戏特色【偶遇随机事件】一步一个随机事件。神秘的太空中暗潮涌动。你将遇到各式各样的生物,也会面临很多抉择,是惊..._指派特工在危险星球完成任务的游戏

【数学建模】day04-插值与拟合-程序员宅基地

文章浏览阅读287次,点赞2次,收藏3次。关于插值原理,这篇文章里总结过。插值,是在有限个数据点的情况下,模拟出更多的点来适应实际问题的需要。拟合,是在已知数据点基础上,以已知点处最小误差为标准,模拟出近似函数。二者有似,实则不同,matlab提供了基本完整的解决方案。一、插值1. 一维插值(1)拉格朗日插值经典的拉格朗日插值并没有现成的函数。自行编写如下:input: 相同维度的已知点x0,y0o..._function y lagrange(x0,y0,x)什么意思

深度学习论文翻译解析(五):Siamese Neural Networks for One-shot Image Recognition-程序员宅基地

文章浏览阅读947次。论文标题:Siamese Neural Networks for One-shot Image Recognition论文作者: Gregory Koch Richard Zemel Ruslan Salakhutdinov论文地址:https://www.cs.cmu.edu/~rsalakhu/papers/oneshot1.pdf声明:小编翻译论文仅为学习,如有侵权..._omniglot数据集论文

2015年4-6月-前端开发月刊-程序员宅基地

文章浏览阅读116次。同步到github了,可以fork之后pull,7月份的已经创建了一个模板可以提交了:https://github.com/jsfront/month同时群内也有代码比赛了,https://github.com/jsfront/qa,感谢 Foam 同学给我的建议。另外,其它同学对将来的学习或发展有好的建议可以发 [email protected] 跟我联系,或者直接回复评论。20..._一个高中生历时3年近60次100多个小时的面试后终进阿里

河南计算机二级考试题目,计算机二级考试模拟题型-程序员宅基地

文章浏览阅读70次。该楼层疑似违规已被系统折叠隐藏此楼查看此楼21. 若不想修改数据库文件中的数据库对象,打开数据库文件时要选择【B 】。A)以独占方式打开B)以只读方式打开C)以共享方式打开D)打开22. 某文本型字段的值只能为字母且长度为6,则可将该字段的输入掩码属性定义为【C 】。A)AAAAAA 可是字母和数字B)LLLLLL 只能是字母C)000000 只能是数字且不可以空格D)999999 数字可空格2..._河南计算机二级证题目

计算机专业国际竞赛,含金量超高的一些国际竞赛—计算机类-程序员宅基地

文章浏览阅读1.1k次。国际信息学奥林匹克竞赛 ioi国际信息学奥林匹克竞赛(international olympiad in informatics,ioi),是每年面向全世界中学生的国际科学奥林匹克竞赛之一。首届竞赛于1989年在保加利亚的布拉维茨举行,有13个国家的46名选手参赛。此后ioi每年举办一届。第32届国际信息学奥林匹克(ioi 2020)竞赛共有超80个国家和地区参加。美国信息学﹙计算机﹚奥林匹克竞赛..._国际学校的计算机竞赛

随便推点

Autowired的底层实现原理_autowrited-程序员宅基地

文章浏览阅读894次。1、概述使用spring开发时,进行配置主要有两种方式,一是的方式,二是java config的方式。spring技术自身也在不断的发展和改变,从当前springboot的火热程度来看,java config的应用是越来越广泛了,在使用java config的过程当中,我们不可避免的会有各种各样的注解打交道,其中,我们使用最多的注解应该就是@Autowired注解了。这个注解的功能就是为我们注入一个定义好的bean2、应用:2.1、应用与构造方法注入2.2、应用与setter方法注入。_autowrited

人脸识别与检测:安全与识别的关键-程序员宅基地

文章浏览阅读360次,点赞4次,收藏8次。1.背景介绍人脸识别与检测是计算机视觉领域的一个重要研究方向,它在安全、识别等方面发挥着重要作用。本文将从以下几个方面进行阐述:背景介绍核心概念与联系核心算法原理和具体操作步骤以及数学模型公式详细讲解具体最佳实践:代码实例和详细解释说明实际应用场景工具和资源推荐总结:未来发展趋势与挑战附录:常见问题与解答1. 背景介绍人脸识别与检测技术的发展历程可以追溯到20世纪...

ssm+mysql“旧物传情”二手交易系统-计算机毕业设计源码03519_交易系统用例图-程序员宅基地

文章浏览阅读1k次。二手商品模块:商品信息,商品展示,类目添加,类目管理新闻资讯模块:资讯内容,资讯列表,资讯模块订单模块:订单修改,订单支付,订单信息,订单管理用户模块:登录,注册,用户管理留言反馈模块:回复内容,留言用户,留言内容_交易系统用例图

087基于深度学习的工地安全帽检测-程序员宅基地

文章浏览阅读367次,点赞5次,收藏9次。084基于CNN卷积神经网络的核桃品质检测_含10多种模型包括alexnet、DenseNet、DLA、GoogleNet、Mobilenet、ResNet、ResNeXt、083基于深度学习的手势识别小程序版本_含10多种模型包括alexnet、DenseNet、DLA、GoogleNet、Mobilenet、ResNet、ResNeXt、S。117nlp自然语言处理-文本情感分类-joy-sadness-anger-fear-love-surprise')

【Jmeter】自动化集成实战:Jmeter 报告可视化(win 10) —— 配置生成测试报告仪表板,Jmeter + Jenkins 自动化构建生成 HTML 报告_jmeter报告可视化:配置生成报告仪表板,jmeter+jenkins自动化构建生成html报告配-程序员宅基地

文章浏览阅读5.3k次,点赞2次,收藏33次。目录一、jmeter报告仪表板相关信息二、文件修改说明三、jmeter.properties文件配置四、user.properties文件配置五、新建jtl报告目录六、复制jmeter.properties文件并重命名七、写批处理bat文件八、准备jmeter测试计划脚本九、本地调试bat文件十、Jenkins自动化构建一、jmeter报告仪表板相关信息..._jmeter报告可视化:配置生成报告仪表板,jmeter+jenkins自动化构建生成html报告配置

青藏高原矢量_如何摆脱设计师的高原-程序员宅基地

文章浏览阅读280次。青藏高原矢量 重点 (Top highlight)Four years ago, I embarked on a drastic career change from pre-med to product design. I dropped all my courses, attended a hackathon every weekend, and worked over 80–90 hours..._people often misunderstand this because they assume that their continued bak