vue 中父级样式深度覆盖子组件
一、概述
项目需要的原因,在sub组件的父级list组件中需要用到xhcj组件,同时sub组件中也用到了xhcj组件,两个地方代码逻辑是相同,仅仅是样式有些微的差别,所以决定共用组件,然后覆盖样式。
style标签上的scoped属性会致使样式只作用于当前组件,对子组件是不起作用的,但是不加scoped会使父级引入的xhcj和这里引用的xhcj样式都变化,所以也是不可以的。
二、解决方法
这是最开始写的版本,在sub中,我写了两个style标签,需要覆盖的那部分没有加scoped属性,也实现了我需要的效果,但是写两个style标签还是觉得不太合适。
<style scoped lang='scss'> ... </style> <style lang="scss"> //.subscribe 这个样式sub组件中的,是为了覆盖这个组件下面的xhcj组件的样式 .subscribe .xhjj{ border: none; position: static; background: transparent; width: auto; height: auto; .sbottom{ height: auto; overflow: inherit; overflow-x: inherit; .treeFirst{ border: none; background: transparent; } .flex-w-wrap{ background-color: transparent!important; .treethird{ width: 25%; } } } } </style>
然后改成了下面这个版本
<style scoped lang="scss"> ...... .subscribe /deep/ .xhjj{ border: none; position: static; background: transparent; width: auto; height: auto; .sbottom{ height: auto; overflow: inherit; overflow-x: inherit; .treeFirst{ border: none; background: transparent; } .flex-w-wrap{ background-color: transparent!important; .treethird{ width: 25%; } } } } </style>
重点位置已经标红,这里有了scoped属性,不再使用两个style标签去写。
但是使用/deep/可以深度选择到子组件,也就不限于样式只对当前组件有效了。
/deep/可以用>>>进行替代,但是>>>这个某些预编译器可能无法正常解析,所以可以使用/deep/进行代替,作用是一样。
本文参考链接:
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】博客园携手 AI 驱动开发工具商 Chat2DB 推出联合终身会员
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· ASP.NET Core - 日志记录系统(二)
· .NET 依赖注入中的 Captive Dependency
· .NET Core 对象分配(Alloc)底层原理浅谈
· 聊一聊 C#异步 任务延续的三种底层玩法
· 敏捷开发:如何高效开每日站会
· 终于决定:把自己家的能源管理系统开源了!
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(一):从.NET IoT入
· C#实现 Winform 程序在系统托盘显示图标 & 开机自启动
· ASP.NET Core - 日志记录系统(二)
· 实现windows下简单的自动化窗口管理