iview tab标签页样式设置

最新推荐文章于 2025-06-19 12:40:23 发布

小橘子皮__兜兜

最新推荐文章于 2025-06-19 12:40:23 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签： view design 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_43657954/article/details/127769884

本文介绍了如何在项目中调整ivu-tabs标签样式，包括默认、选中、悬停状态的颜色，以及去除/deep/的全局样式设置方法。适合寻求ivu组件定制的开发者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目中遇到tabs标签页样式要和主题颜色一致的问题，用控制台也没找出来怎么修改，最后百度找到的，希望有帮助到你。

//默认颜色
/deep/ .ivu-tabs-nav .ivu-tabs-tab {
  border: none;
  background-color: transparent;
}
//鼠标选中的颜色
/deep/ .ivu-tabs-nav .ivu-tabs-tab-active {
 color: #26bca8;
}
//鼠标移上去的颜色
/deep/ .ivu-tabs-nav .ivu-tabs-tab:hover{
 color: #26bca8;
}
//下划线样式
/deep/.ivu-tabs-ink-bar {
    background-color: #26bca8;
}

如果样式放在全局里，要去掉/deep/，加/deep/ 记得加 lang='less' scoped