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

踩坑：el-button样式覆写

---

表单代码参考：

  
      
        

          
              
                  
              
              
                  
                  忘记密码？
              
          
          
          立即登录
          没有账号？立即登录
        
      
        
  
  

---

效果图对比 · 说明：

以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样式覆写 - 生效篇 ” 的全部内容。