关于vue改变scoped其他组件的样式 ---深度选择器

在开发Vue时，经常遇到无法修改，外部导入的组件的样式问题。原因就在于，我把每个style都加了一个 scoped 的作用符

那么怎么解决这个问题呢：

1. 不使用 scoped 这个作用符
2. 使用vue的深度选择器

什么是深度选择器呢？

相关资料：v-loader

当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装

如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 深度选择器

怎么使用 深度选择器

• 原生的CSS： >>>

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

• less预处理器： /deep/

/deep/ .dh-button:first-child{
     margin-right: 20px;
}

• scss预处理器： ::v-deep

::v-deep .dh-button:first-child{
     margin-right: 20px;
}