更改el-tabs的文字大小样式等

原创已于 2022-03-17 14:23:51 修改 · 2.3k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #css3 #css

于 2022-03-17 14:23:10 首次发布

el-tabs 专栏收录该内容

1 篇文章

订阅专栏

这篇博客主要介绍了如何使用/deep/选择器和!important来深入定制Element UI库中的Eltabs组件样式，包括修改导航栏背景色、字体大小、行高以及各标签页的样式，确保样式覆盖并有效应用。

.container /deep/ .el-tabs__nav-scroll{
  background-color: aqua;
  line-height: 65px;
    height: 65px;
}
.container /deep/ .el-tabs__nav{
  font-size: 29px;
    line-height: 65px;
    height: 65px;
}
.container /deep/ #tab-first{
  line-height: 70px;
    height: 70px;
}
.container /deep/ #tab-second{
  line-height: 70px;
    height: 70px;
}
// 更改eltabs的样式

.container /deep/.el-tabs__item {
  font-size: 18px !important;
  height: 40px;
}


// .container /deep/.el-tabs__header {
//   font-size: 30px !important;
// }