element-UI组件el-button样式覆写 - 生效篇

版权声明：本文为博主原创文章，允许转载，但转载必须注明出处并附带首发链接 https://blog.csdn.net/qq_35393869/article/details/88710758

踩坑：el-button样式覆写

---

表单代码参考：

<!-- 表单区域 -->
<div class="wd1200 form-container">
  <el-row :gutter="0">
      <el-col :span="12" class="bg1">
        <div id="form-cnt">
          <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
              <el-form-item label="手机号码">
                  <el-input v-model="formLabelAlign.name" placeholder="请填写手机号码" clearable></el-input>
              </el-form-item>
              <el-form-item label="密码" class="pos-rel">
                  <el-input class="father-clear" v-model="formLabelAlign.region" placeholder="请输入密码" clearable></el-input>
                  <el-button class="forget-btn" type="text" size="">忘记密码？</el-button>
              </el-form-item>
          </el-form>
          <!-- 提交按钮 -->
          <el-row class="mgt67"><el-button type="primary" class="sub-btn sub1">立即登录</el-button></el-row>
          <el-row class="mgt23"><el-button type="primary" plain class="sub-btn sub2">没有账号？立即登录</el-button></el-row>
        </div>
      </el-col>
      <el-col :span="12" class="bg2">&nbsp;&nbsp;</el-col>
  </el-row>
  

</div>

---

效果图对比 · 说明：

以login.vue页面为例：

• 使用【代码1】，操作的覆写样式:hover和:active 无变化效果；
• 使用【代码2】，操作的覆写样式:hover和:active 效果正常；
• （代码如下）

---

login.vue 旧代码：【代码1】

覆写后，操作 · 样式不生效

.el-button--primary.is-plain.sub2{color: #4194f6;background: none;border-color: #4194f6;}
.el-button--primary.is-plain.sub2:active {background: #3a8ee6;border-color: #3a8ee6;color: #FFF;}

---

login.vue 新代码：【代码2】

覆写后，操作 · 样式立刻生效

.sub2{color: #4194f6;background: none;border-color: #4194f6;}
.sub2:active {background: #3a8ee6;border-color: #3a8ee6;color: #FFF;}

---

以上就是关于“ element-UI组件el-button样式覆写 - 生效篇 ” 的全部内容。