vue引用了第三方组件,如elementUI,需要在组件中局部修改第三方组件的样式,而又不想去除scoped属性造成组件之间的样式污染。

办法一:

使用::v-deep操作符( >>> 的别名)

这里说还可以用/deep/,但是我试验了这个直接报错了。用::v-deep是有效果的

办法二:

在vue组件中使用两个style标签,一个加scoped属性,一个不加scoped属性,把需要覆盖的css样式写在不加scoped属性的style标签中。

例子1:调整el-table中背景样式,比如半透明

效果如下:

Vue 中 scoped 样式穿透相关推荐

  1. Vue中关于scoped以及scoped样式穿透的原理与使用详解

    1. scoped 当多个组件中有相同的元素或相同的类名时,在其中一个组件中更改该元素的样式,会导致所有组件中的样式更改,造成样式污染,若只想该样式在当前组件生效就需要用到scoped 示例 组件de ...

  2. vue的scoped 样式隔离,样式穿透,及细节

    先说环境吧:vue 3.2.45,也试过vue 3.2.16 vue的scoped样式隔离 原理: 在当前组件的.vue文件中,如果style标签加了scoped属性,那么在组件渲染为DOM时,会对每 ...

  3. vue中scoped的使用

    vue中scoped的使用 原理: vue通过在DOM结构以及css样式上加上唯一的标记 data-v-469af010,保证唯一, [ ] 概点知识 1.父组件无scoped属性,子组件带有scop ...

  4. 五十九、Vue中的样式绑定

    @Author:Runsen @Date:2020/10/16 大四是一个焦虑的时期.烦恼有时候是具体问题带来的压力,有时候却是无端的.莫名其妙的,有时候还极易受到外界的影响,别人一句话就会激起内心难 ...

  5. Vue 中 css scoped 样式穿透 ( stylus[] / sass / less[/deep/] )

    scoped看起来很好用,当时在Vue项目中,当我们引入第三方组件库时(如使用element-ui),需要在局部组件中修改第三方组件库样式,而又不想去除scoped属性造成组件之间的样式覆盖.这时我们 ...

  6. vue中scoped的样式污染处理

    1.为什么要用scoped? 当组件间的类名相同时,会发生css样式污染问题. 如果是父子组件有相同类名,则样式都为父组件中的同类名样式,如果是兄弟组件,看哪个组件最后创建,样式就以哪个为主进行覆盖之 ...

  7. vue中动态样式不起作用? scoped了解一下

    vue中style标签使用属性scoped的注意事项 style上添加属性scoped可以实现样式私有化,但是在使用动态样式时,样式会不起作用.可以先去掉scoped 转载于:https://www. ...

  8. Vue中scoped属性学习笔记

    #什么是scoped vue中在style标签中的一个属性,使用scoped属性可以使标签内的样式只作用于当前组件中的元素. #scoped的原理 在刚开始使用的时候,页面调试的html标签内和样式中 ...

  9. 系列九、vue中css样式字体设置为华文行楷

    一.下载华文行楷字体 # 下载地址 https://file.diyiziti.com/front/download/common/download?id=91# 百度网盘分享地址 链接:https: ...

最新文章

  1. SIFT特征点匹配中KD-tree与Ransac算法的使用
  2. TC专访Waymo首席技术官:谷歌自动驾驶的过去和未来
  3. boost::mpl模块实现multiset相关的测试程序
  4. Averse, Adverse
  5. 如何使用Java创建AWS Lambda函数
  6. 【转】文本文件和二进制文件区别及java中字节流和字符流归纳
  7. MySQL Cookbook 学习笔记-03
  8. 用JAVA制作小游戏——推箱子(一)
  9. 20155229《网络对抗技术》Exp9:Web安全基础
  10. API(应用程序接口)是什么
  11. SVN提示: File or directory '*' is out of date; try updating 解决方案
  12. 万能日志数据收集器 Fluentd - 每天5分钟玩转 Docker 容器技术(91)
  13. 《计算机网络课程设计(第2版)》——2.4节课程设计分析
  14. php curl 命令行,curl 命令行教程
  15. php生成临时文件,php生成zip压缩文件的方法详解
  16. EDK环境搭建UEFI工程模块文件介绍
  17. 聚合收款码有限制吗?怎么办理?
  18. Ubuntu 16.04 无线网络 设备未就绪(device not ready)
  19. insertSelective和insert的区别?
  20. fpga串口打印计数值作业

热门文章

  1. 企业管理软件如何选型?看完后恍然大悟
  2. android制作3d打印机,基于Rayland主板的3D打印机指令控制Android(部分)实现
  3. 查看Java元空间区域
  4. C++计算矩阵对角线和的程序
  5. ubuntu 安装tar.gz文件
  6. 配置SqlServer发送邮件
  7. 守护者创客~ 一个真正可以放手一搏的项目
  8. php转换时间戳的一些方法
  9. linux下write()和read()函数详解
  10. 浅谈oracle树状结构层级查询