Vue2 Vue3中scoped样式穿透修改样式

相信很多小伙伴在开发中都遇到过，使用框架开发，但是有地的放的样式跟设计图不一样的时候，那么我们如何修改框架的样式呢？

1、什么是scoped？它的作用是什么？

在vue组件样式中使用scoped，相当于将样式私有化，即样式只用于与当前组件。
通过该属性，可以使得组件之间的样式不互相污染。

2、为什么需要穿透scoped？

一般项目中会引用了第三方组件，需要根据需求在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。就需要样式穿透啦

 vue2的穿透方式

第一种
.类名 >>> .类名{ 样式 }

第二种
/deep/ .类名{ 样式 }

第三种
::v-deep .类名{ 样式 }

 vue3的穿透方式

第一种：:deep()
:deep( 样式选择器 )

第二种：::v-deep()
::v-deep( 样式选择器 )