Vue3.x 深度选择器（样式穿刺）＞＞＞ 和 /deep/ 和 ::v-deep 被弃用desprecated

近期笔者使用Vue3 + TS写项目的时候，使用深度选择器发现如下提示

[@vue/compiler-sfc] the >>> and /deep/ combinators have been deprecated. Use :deep() instead.

一、深度选择器淘汰

>>>
/deep/
和如下的写法在vue3.x中被淘汰了

<style lang="less" scoped>
/deep/ .ant-table-tbody > tr > td,
/deep/ .ant-table-thead > tr > th {
	vertical-align: middle !important;
}
::v-deep .ant-table-tbody > tr > td,
::v-deep .ant-table-thead > tr > th {
	vertical-align: middle !important;
}
:deep .ant-table-tbody > tr > td,
:deep .ant-table-thead > tr > th {
	vertical-align: middle !important;
}
</style>

二. 解决办法

以下四种写法均不会报出警告。

<style lang="less" scoped>
// 第一种
:v-deep .ant-table-tbody > tr > td,
:v-deep .ant-table-thead > tr > th {
	vertical-align: middle !important;
}
// 第二种
::v-deep(.ant-table-tbody > tr > td),
::v-deep(.ant-table-thead > tr > th) {
	vertical-align: middle !important;
}
// 第三种
:v-deep(.ant-table-tbody > tr > td),
:v-deep(.ant-table-thead > tr > th) {
	vertical-align: middle !important;
}
// 第四种
:deep(.ant-table-tbody > tr > td),
:deep(.ant-table-thead > tr > th) {
	vertical-align: middle !important;
}
</style>

但是使用了 :deep () 之后发现部分IDE工具会报出如下错误

unknown pseudo selector ‘deep’