ant Tabs 标签头的文本颜色和背景颜色修改
时间: 2024-12-21 16:29:24 浏览: 9
在Ant Design Vue (简称`ant-design-vue`) 中,`Tabs`组件的标签页标题的颜色和背景颜色可以通过CSS样式进行自定义。以下是如何修改这两个属性的基本步骤:
1. **文字颜色(text color)**:
可以通过`.ant-tabs-tabpane-active .ant-tabs-tab` 或者 `.ant-tabs-tab-active` 的 CSS 类来设置选中标签的文字颜色。例如,如果你想将文字颜色改为红色,可以添加以下样式到你的样式表中:
```css
.ant-tabs-tabpane-active .ant-tabs-tab {
color: red;
}
```
2. **背景颜色(background color)**:
对于未选中的标签背景,可以使用 `.ant-tabs-tab` 类;对于选中的标签背景,使用 `.ant-tabs-tabpane-active .ant-tabs-tab` 或 `.ant-tabs-tab-active`。示例如下:
- 未选中标签背景:
```css
.ant-tabs-tab {
background-color: #f5f5f5; /* 颜色自行替换 */
}
```
- 选中标签背景:
```css
.ant-tabs-tabpane-active .ant-tabs-tab {
background-color: #fff; /* 颜色自行替换,通常白色 */
}
```
记得在实际项目中,你可以在你的全局样式文件或者每个`<Tabs>`组件的`style`属性内添加这些样式,根据需要调整颜色值。
阅读全文