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

踩坑:el-button样式覆写


表单代码参考:



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

效果图对比 · 说明:

login.vue页面为例:
element-UI组件el-button样式覆写 - 生效篇_第1张图片

  • 使用【代码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样式覆写 - 生效篇 ” 的全部内容。

你可能感兴趣的:(element-ui,Element踩坑篇)