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的环境