自定义 Element+ 组件样式

开发过程中遇到，先记下来，以后做笔记汇总

自定义 el-button 样式

<!--此处TYPE可以是自定的名称，也可以是预置好的，其样式可以在CSS中自定-->
<el-button type="TYPE" style="font-color: white">登陆</el-button>

Element+ 的文档中按钮的样式只有固定几种，有时颜色和主题不搭，需要进一步自定义

在<style scoped><style/>中使用如下CSS

/* 定义激活时的样式 */
.el-button--TYPE.is-active,
.el-button--TYPE:active {
  background: #20B2AA;
  border-color: #20B2AA;
  color: #fff;
}

/* 一致化定义按下和悬停的样式 */
.el-button--TYPE:focus,
.el-button--TYPE:hover {
  background: #48D1CC;
  border-color: #48D1CC;
  color: #fff;
}

/* 一般状态下的样式 */
.el-button--TYPE {
  color: #FFF;
  background-color: #20B2AA;
  border-color: #20B2AA;
}