自定义 element-ui 定义的样式

最新推荐文章于 2025-06-28 14:45:55 发布

原创最新推荐文章于 2025-06-28 14:45:55 发布 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍如何在Element-UI框架中自定义顶部导航下滑线及文字颜色，通过层级选择器实现样式覆盖，适用于前端开发者进行UI定制。

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

在使用element-ui框架的时候，想修改element-ui的样式，一定要通过层级关系，通过层级关系找到需要修改的element样式进行修改。

比方说我想修改顶部导航

的下滑线颜色以及文字颜色，可以这样修改：

<div class="navTotal">
    <div class="total-msg">
      <div class="flex-pannle total-msg__logo">
         <img src="../img/logo.png" />
      </div>
      <div class="flex-pannle total-msg__search">
        <el-input placeholder="请输入内容" v-model="input5" class="input-with-select">
          <el-select v-model="select" slot="prepend" placeholder="请选择">
            <el-option label="餐厅名" value="1"></el-option>
            <el-option label="订单号" value="2"></el-option>
            <el-option label="用户电话" value="3"></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="用户管理" name="first"></el-tab-pane>
      <el-tab-pane label="配置管理" name="second"></el-tab-pane>
      <el-tab-pane label="角色管理" name="third"></el-tab-pane>
      <el-tab-pane label="定时任务补偿" name="fourth"></el-tab-pane>
    </el-tabs>
  </div>

修改代码如下：

 .navTotal>>>.el-tabs__active-bar {
    background-color: #f00;
  }
  .navTotal>>>.el-tabs__item:hover {
    background-color: #f00;
  }
  .navTotal>>>.el-tabs__item.is-active{
    color: #f00;
  }

修改完成，保存运行查看结果：