使用:deep深度选择器的注意事项

当我们使用一些UI框架的时候，可能经常要自定义一些样式去调整框架本身的样式，这个时候我们就可能需要用到:deep深度选择器。记录一下使用:deep深度选择器时一个重要的注意事项。

:deep常规写法一般是：

<style lang="scss" scoped>
:deep(class名称) {
    /* 样式规则 **/
  }
</style>

而需要值得注意的是：

由于:deep必须在当前组件某节点下挂载才生效，所以对一些样式进行渗透时要注意它的父节点。

正常来说，大部分组件都直接用深度选择器就可以对其进行样式渗透，但对于类似Modal、Dropdown、Message等这类容易在body下挂载的组件来说，:deep写在scoped下就不会生效了，这时候有两种解决办法：

1.把scoped去掉，但是这样容易污染全局的组件

2.指定父组件。大部分UI框架的组件都有属性让你指定组件的挂载节点，或者直接让你挂载在父节点上，可以仔细看看使用的框架的官方文档。在指定了父节点后，:deep在scoped下就可以生效了。