vue的/deep/——深度作用选择器

背景：
最近在vue的项目中使用element-ui进行开发，但是通常呢，element-ui的组件样式会与我们的设计稿有较大的出入，故而大多数时候不能够直接使用，需要进行样式的改造。但是这又面临着一个问题，部分组件所暴露出来的配置项并不能够支持我们将组件设置成我们想要的样式。这时候我们往往会想到去到浏览器，找到对应显示组件的className,然后在当前组件内进行重写，用！important进行样式的覆盖。但很遗憾，这并不能够成功的重置组件的样式。为什么呢？因为我们在封装一个组件时，为了避免当前组件内的样式对全局样式造成污染，通常会为style标签添加scope属性，这个属性保证了在当前组件内添加的样式只作用于当前组件，当然，还可以作用于引用组件的根组件。所以呢，这样一来，我们在当前组件内重写子组件内的样式时，是作用不到被引用组件上的。那有什么办法呢？/deep/深度作用选择器出现了。

使用：
官方的解释很简单，即使当前组件内设置的样式选择器可以作用到子组件上，
贴官方链接

简单来说，只要你知道子组件中元素的类名，你就可以通过这个方法，设置子组件中元素的样式啦。

在一般的css中的使用方法:

.a >>> .b { /* ... */ }

使用了scss等预处理器:

/deep/ .a{}
::v-deep .a{}

在vue3中使用scss

::v-deep(.a){}

基本就是这样，其实我还想知道react中有没有类似的使用方法，但是我react忘的快差不多了，所以我就不再细究了，以后如果想起来了就搞一下。