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

智能推荐

MySQL 到Oracle 实时数据同步实操分享_mysql数据更新oracle-程序员宅基地

文章浏览阅读760次,点赞20次,收藏19次。如果选择的是全量+增量同步,在全量任务执行完毕后,Tapdata Agent 会自动进入增量同步状态。1.同第一步操作,点击左侧菜单栏的【连接管理】,然后点击右侧区域【连接列表】右上角的【创建连接】按钮,打开连接类型选择页面,然后选择 Oracle。根据数据需求,选择需要同步的库、表,如果你对表名有修改需要,可以通过页面中的表名批量修改功能对目标端的表名进行批量设置.在以上选项设置完毕后,下一步选择同步类型,平台提供全量同步、增量同步、全量+增量同步,设定写入模式和读取数量。_mysql数据更新oracle

鲲鹏devkit开发套件——编译调试工具介绍-程序员宅基地

文章浏览阅读2k次,点赞7次,收藏4次。编译调试插件是其中的一个子工具。编译调试插件即插即用,支持一键安装服务器鲲鹏编译器,支持单机下Nvidia GPU应用调试能力,通过统一调试界面调试GPU应用,实现cuda-gdb调试能力,以及鲲鹏平台远程调试能力devkit编译调试工具具有以下特性一键式部署支持从Visual Studio Marketplace下载并在线安装插件,同时支持一键部署服务端GCC for openEuler、毕昇编译器和毕昇JDK编译调试一键式安装GCC for openEuler、毕昇编译器和毕昇JDK。_devkit

30米分辨率年降水量数据集/30米温度分布数据/ndvi数据/npp数据/土地利用数据_降水数据 涌现-程序员宅基地

文章浏览阅读644次,点赞26次,收藏20次。随着气候变化形势加剧,最新的1981-2021年40年气候标准期与1981-2010年30年气候标准期相比已发生很大变化,为此从2021年夏季开始我们启动了1981-2021年40年气候标准期系列高分辨率气候参数的生产工作。地理遥感生态网目前已经可以提供全球范围近百个高质量数据集,涵盖地形、地貌、流域划分、气候、植被、土壤、土地利用、人口、经济、水资源、土地资源、土壤侵蚀、粮食安全、生态脆弱性、生态重要性、生态系统服务、水灾害、山地灾害、国土开发格局、专题制图、统计表格等几十个门类!赶紧三连获取数据吧!_降水数据 涌现

VTK笔记-使用vtkSplineFilter类处理3D空间曲线-程序员宅基地

文章浏览阅读1.7k次。double p0[3] = { 1.0, 0.0, 0.0 }; double p1[3] = { 0.0, 1.0, 0.0 }; double p2[3] = { 0.0, 0.0, 1.0 }; double p3[3] = { 1.0, 2.0, 3.0 }; vtkNew<vtkPoints> points; points->InsertNextPoint(p0); points->InsertNextPoint(p1); points->Inser_vtksplinefilter

如何使用FFmpeg将AVI转换为MP4_ffmpeg 转换 不重新编码-程序员宅基地

文章浏览阅读108次。使用FFmpeg将AVI转换为MP4_ffmpeg 转换 不重新编码

广工数字逻辑与EDA设计课程EDA设计实验报告_广工eda实验报告-程序员宅基地

文章浏览阅读759次,点赞7次,收藏6次。基本要求:写上实验目的、实验环境及器件、实验内容和实验结果,附上 Verliog代码、测试平台、综合结果图(RTL 视图及工艺视图) ,综合前仿真、综合后仿真、布局布线后仿真的截图,并写出心得体会。EDA 设计实验报告。_广工eda实验报告

随便推点

Spring-aop的四种增强方式_spring aop增强方法-程序员宅基地

文章浏览阅读144次。java_spring aop增强方法

ubuntu18.04安装cuda9.0+cudnn+tf_ubuntu 18.04 cuda 9-程序员宅基地

文章浏览阅读4.5k次。1.禁用nouveau安装完ubuntu18.04后,在“软件和更新“---附加驱动,会有驱动如果没有,那就自己去安装。首先,需要禁用 nouveau,只有在禁用掉 nouveau 后才能顺利安装 NVIDIA 显卡驱动。禁用方法就是在 /etc/modprobe.d/blacklist-nouveau.conf 文件中添加一条禁用命令,首先需要打开该文件,通过以下命令打开: ..._ubuntu 18.04 cuda 9

时序分解模型 | Matlab基于EMD-GWO-SVR基于经验模态分解和灰狼算法优化支持向量机的时间序列预测-程序员宅基地

文章浏览阅读208次。时序分解模型 | Matlab基于EMD-GWO-SVR基于经验模态分解和灰狼算法优化支持向量机的时间序列预测

cmake使用教程(三)-安装,Android面试超详细知识点_android cmake 教程-程序员宅基地

文章浏览阅读165次。注意上边install的第一个参数和第三个参数。TARGETS包含六种形式:ARCHIVE, LIBRARY, RUNTIME, OBJECTS, FRAMEWORK, BUNDLE。注意Mathfunction安装的是LIBRARY,而根目录下的可执行文件是RUNTIME类型。FILE 将给定的文件复制到指定目录。如果没有给定权限参数,则由该表单安装的文件默认为OWNER_WRITE、OWNER_READ、GROUP_READ和WORLD_READ。TARGETS和FILE可指定为相对目录和绝对目录_android cmake 教程

1、MacBook搭建嵌入式Linux开发板和Parallel虚拟机网络互通_mac开发嵌入式-程序员宅基地

文章浏览阅读559次,点赞8次,收藏10次。MacBook搭建嵌入式Linux开发板和Parallel虚拟机网络互通_mac开发嵌入式

【python 走进NLP】pkuseg一个领域细分的中文分词工具包_领域分词-程序员宅基地

文章浏览阅读1.5k次。2019年1月份北京大学发布了中文分词工具包:pkuseg,来测试下:简介:pkuseg具有如下几个特点:多领域分词。不同于以往的通用中文分词工具,此工具包同时致力于为不同领域的数据提供个性化的预训练模型。根据待分词文本的领域特点,用户可以自由地选择不同的模型。 我们目前支持了新闻领域,网络文本领域和混合领域的分词预训练模型,同时也拟在近期推出更多的细领域预训练模型,比如医药、旅游、专利、小..._领域分词

推荐文章

热门文章

相关标签