文章目录

• 前言
• 一、问题描述
• 二、解决方案
• • 样式穿透
  • 什么是data-v
• 总结

前言

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

一、问题描述

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

HTML结构如下：

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

二、解决方案

样式穿透

• 样式穿透格式

外层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

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

总结

以上就是vue如何快速修改第三方组件样式的全部思路。重点理解 样式穿透 以及 data-v 的相关知识点。

标签：vue,样式,vxe,radio,table,--,data,第三方
来源： https://blog.csdn.net/weixin_41870211/article/details/109990432