vue如何快速修改第三方组件的样式 -- 样式穿透 以及 data-v-xxx

---

前言

在前端开发的过程中，经常需要引用第三方的插件，同时需要改变第三方插件的样式。在改第三方插件个过程中会出现样式不生效的问题，如何才能有效的改掉第三方插件的样式呢？

---

一、问题描述

在开发过程中遇到的应用场景是要隐藏该树组件前的单选按钮，这棵树采用的第三方插件是vxe-table。

HTML结构如下：

将这一段话复制到style中，并将dispaly改成 none。
结果发现不生效。

<style lang="scss" scoped>
	.vxe-table .vxe-cell--radio .vxe-radio--icon{
        display: none;
    }
</style>

为什么会不生效呢?归根结底是由于vue中样式的隔离机制，scoped

<style lang="scss" scoped>

scope

• 在vue组件中，为了使样式私有化（模块化），不对全局造成污染，可以在style标签上添加scoped属性以表示它的只属于当下的模块。
• 添加了scoped属性的组件，为了达到组件样式模块化，做了两个处理：
  • 给HTML的DOM节点加一个不重复data属性(形如：data-v-xxx)来表示他的唯一性。
  • 在每句css选择器的末尾（编译后的生成的css语句）加一个当前组件的data属性选择器（如[data-v-2311c06a]）来私有化样式。

css样式有一个优先级的说法，scoped的这一操作，虽然达到了组件样式模块化的目的，但是会造成一种后果：每个样式的权重加重了。理论上我们要去修改这个样式，需要更高的权重去覆盖这个样式。这是增加复杂度的其中一个维度。

二、解决方案

样式穿透

• 样式穿透格式

外层Class >>> 第三方组件样式 {
}

• 怎么确认外层Class是哪一个呢，找dom结构中最近的date-v。在下图中就是：
  

按照上述思路，代码如下：

<style lang="scss" scoped>
	.vxe-table >>> .vxe-cell--radio .vxe-radio--icon{
        display: none;
    }

    .vxe-table >>> .is--checked.vxe-cell--radio .vxe-radio--checked-icon {
        display: none;
    }
</style>

• 为了避免对全局的样式造成污染，对上述代码进行了优化。在外层又手动的包了一层class，然后再进行样式穿透。

<style lang="scss" scoped>
	.vxe-table-content >>> .vxe-table .vxe-cell--radio .vxe-radio--icon{
        display: none;
    }

	.vxe-table-content >>> .vxe-table .is--checked.vxe-cell--radio .vxe-radio--checked-icon {
        display: none;
    }
</style>

data-v-xxx

这是在标记vue文件中css时使用scoped标记产生的，因为要保证各文件中的css不相互影响，给每个component都做了唯一的标记，所以每引入一个component就会出现一个新的’data-v-xxx’标记，第三方组件内部不会出现data-v-xxx的标记

---

总结

以上就是vue如何快速修改第三方组件样式的全部思路。重点理解 样式穿透 以及data-v-xxx的相关知识点。若描述有误，请指正。