Vue組件樣式穿透

前情

Vue是目前主流的前端框架之一，我是Vue框架的忠實老用戶，平時開發中如果再依賴個第三方組件庫那樣開發效率就會事半功倍。

第三方組件庫可以很大提高開發效率，但是叫會有一些UI效果需要自定義，如想做一些微調更滿足項目需求的時候，你會發現組件可能並沒有提供可配置項，此時就不得不通過自定義css去調整組件樣式了。

樣式穿透

你直接通過dom查找修改樣式是不會起效果的，此時我們就可以使用深度選擇器來達到樣式穿透，以達到微調組件樣式。

調用方式(此處以調整京東nutui輸入框清除按鈕顏色爲示例)：

<style lang="scss" scoped>
.form-item{
  ::v-deep {
    .nut-textinput-clear{
      color:rgba(93, 151, 171, 0.75);
    }
	}
}
</style>

除了上面的::v-deep，我們常見的還有/deep/、>>>，那我們到底該用哪種了，可以參考如下表格

類別	css	less/node-sass	dart-sass	stylus
::v-deep	√	√	√	√
/deep/	√	√	×	√
>>>	√	×	×	√

從上表格知悉，我們可以w深度選擇器::v-deep來兼容所有不同css的環境