自定义 Element+ 组件样式

CSS 发布于 Jan 10, 2021 更新于 Jan 10, 2021

自定义 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;
}

标签

Noam Chi

An Innovative Quant Developer. 2018 VEX World Final THINK Award🏆