自定义 ElementUI el-button按钮颜色

一、首先新建一个公共样式文件，然后在里面添加样式代码

.el-button--cyan.is-active,
.el-button--cyan:active {
  background: #20B2AA;
  border-color: #20B2AA;
  color: #FFFFFF;
}

.el-button--cyan:focus,
.el-button--cyan:hover {
  background: #48D1CC;
  border-color: #48D1CC;
  color: #FFFFFF;
}

.el-button--cyan {
  background-color: #20B2AA;
  border-color: #20B2AA;
  color: #FFFFFF;
}

二、在 main.js 中导入

import "@/styles/ruansheng.scss"

三、在页面中使用

 <el-button type="cyan"/>

因为我们之前定义的类名就是 cyan 所以在这里使用可以直接用类名 

看图：