vue 中父级样式深度覆盖子组件

py3study

发布于 2021-04-02 09:34:01

1.8K0

发布于 2021-04-02 09:34:01

文章被收录于专栏：python3python3

一、概述

项目需要的原因，在sub组件的父级list组件中需要用到xhcj组件，同时sub组件中也用到了xhcj组件，两个地方代码逻辑是相同，仅仅是样式有些微的差别，所以决定共用组件，然后覆盖样式。

style标签上的scoped属性会致使样式只作用于当前组件，对子组件是不起作用的，但是不加scoped会使父级引入的xhcj和这里引用的xhcj样式都变化，所以也是不可以的。

二、解决方法

这是最开始写的版本，在sub中，我写了两个style标签，需要覆盖的那部分没有加scoped属性，也实现了我需要的效果，但是写两个style标签还是觉得不太合适。

<style?scoped>
???...
</style>
<style>
//.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>
??......?
??.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/进行代替，作用是一样。

本文参考链接：

https://blog.csdn.net/qq_40851816/article/details/95213145

本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2021-04-01 ，如有侵权请联系 cloudcommunity@tencent.com 删除

list

编译器

本文分享自作者个人站点/博客?前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与?腾讯云自媒体分享计划? ，欢迎热爱写作的你一起参与！

list

编译器

登录后参与评论

0 条评论

热度