自定义 element-ui 定义的样式

 在使用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;
  }

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