vue3 antdv 修改tabs的tabpane的样式，以达到我们项目中需要效果样式，或者根据系统定义全局主题颜色来自动调整颜色。

1、先上个效果图：

2、先来找一下这个tabs.tabpane的样式名className

二种状态下的tabpane的样式，就找出来了，其实就是二个div

未选中：ant-tabs-tab 

选中：ant-tabs-tab ant-tabs-tab-active

tabpane的 ant-tabs-tab-btn。

3、修改样式，以实现我们项目中需要的样式：

//标签激活状态样式
  ::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);
  }

这里的getThemeColor是一个computed属性，可以修改成一个固定的颜色比如 #ff0000红色。

这里的样式一定要使用::v-deep来修改，否则不生效。

参考：

Ant Design Vue - ＜a-tabs＞默认样式修改 去掉标签下标，去掉标签下长灰线条，改变标签激活与未激活状态的不同样式_a-tabs样式-CSDN博客