vue3 深度选择器 ::v-deep usage as a combinator has been deprecated. Use :deep(＜inner-selector＞) instead.

1、先上一个图，之前写的一篇文章中的图：

2、之前的代码：

//标签激活状态样式
  ::v-deep .ant-tabs-tab-active {
    background-color: v-bind(getThemeColor) !important; // 激活状态下的背景颜色
    color: #fff !important; // 激活状态下的文本颜色
    border-radius: 30px;
    padding: 10px;
    height: 35px;
    line-height: 35px;
  }

  ::v-deep .ant-tabs-tab-active .ant-tabs-tab-btn {
    color: #fff !important;
  }

  //标签未激活状态样式
  ::v-deep .ant-tabs-tab {
    background-color: rgb(189, 189, 189);
    border-radius: 30px;
    padding: 10px;
    height: 35px;
    line-height: 35px;
    color: rgba(128, 128, 128, 1);
  }

  ::v-deep .ant-tabs-tab .ant-tabs-tab-btn {
    color: rgba(128, 128, 128, 1);
  }

3、然后下午进行了修改以后，发现报了上面的WARN，那么正确的写法：

//标签激活状态样式
  :deep(.ant-tabs-tab-active) {
    background-color: v-bind(getThemeColor) !important; // 激活状态下的背景颜色
    color: #fff !important; // 激活状态下的文本颜色
    border-radius: 30px;
    padding: 10px;
    height: 35px;
    line-height: 35px;
  }

  :deep(.ant-tabs-tab-active .ant-tabs-tab-btn) {
    color: #fff !important;
  }

  //标签未激活状态样式
  :deep(.ant-tabs-tab) {
    background-color: rgb(189, 189, 189);
    border-radius: 30px;
    padding: 10px;
    height: 35px;
    line-height: 35px;
    color: rgba(128, 128, 128, 1);
  }

  :deep(.ant-tabs-tab .ant-tabs-tab-btn) {
    color: rgba(128, 128, 128, 1);
  }

注意：之前是::v-deep，现在修改为:deep()的形式，:deep，前面没有v-，一定要注意，否则无效哦~~。

4、然后我们来了解一下这个:deep()

5、我们使用:deep()就是想来修改三方组件的样式，也可以理解为css的重写（个人感觉）或者hook之类的，当然我们一般会加上<style  scoped>，或者在上层加一个<div class="div_container">...</div>，这样我们将:deep(.ant-tabs-tab .ant-tabs-tab-btn) {
    color: rgba(128, 128, 128, 1);
  }改为:deep(.div_container .ant-tabs-tab .ant-tabs-tab-btn) {
    color: rgba(128, 128, 128, 1);
  }。就可以，对于一个页面有几个相同的三方组件的不同处理css是有很大的用处。

参考：

vue3中的:deep()深度选择器_vue3 v-deep-CSDN博客