關於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;
}