ant-design-vue里面选项卡tab按钮自定义样式

在Ant Design Vue (ant-design-vue) 中，要自定义`Tabs`组件（选项卡）的按钮样式，你可以通过覆盖内置的CSS样式或者使用Vue的 scoped CSS（局部样式）。以下是两种常见的做法：

1. **覆盖内置样式**:
- 首先，找到原生tabs按钮的类名，通常它们是`.ant-tabs-tab`、`.ant-tabs-tab-active`等。你可以查看官方文档或直接在开发者工具的Elements面板里查找。
- 使用`:deep()`或`::v-deep`来穿透到内部元素，然后在你的Vue组件的样式文件（如`styles.css`或`.vue`文件内）添加如下CSS：

     .ant-tabs-tab {
       /* 在这里添加你的自定义样式 */
       color: your-color;
       background-color: your-background-color;
       border-radius: your-border-radius;
     }
     
     .ant-tabs-tab-active {
       /* 对激活状态的样式进行定制 */
       color: your-active-color;
       background-color: your-active-background-color;
     }

2. **使用Scoped CSS（局部样式）**:
如果你想要只针对某个特定的tabs组件应用样式，可以在对应的`<Tabs>`标签内部使用`style`属性，并使用`:is`伪类配合变量（如果使用的是Vue 3+）：

   <template>
     <Tabs :tabs="yourTabsData" @on-change="handleChange">
       <TabPane v-for="(item, index) in yourTabsData" :key="index" :label="item.label" :name="item.name">
         <!-- 内容 -->
         <div slot="content">{{ item.content }}</div>
       </TabPane>
     </Tabs>
   </template>

   <script setup>
     // ...
   </script>

   <style scoped>
     /* 这里的选择器仅限于当前组件的Tab按钮 */
     .ant-tabs-tab.is-selected {
       /* 自定义样式 */
     }
   </style>

记得在实际使用时替换`your-color`、`your-background-color`等为你的目标颜色值。