vue+elmentui 定义狂拽黑金配色的按钮+消息框
1 修改效果
通过自定义样式的方式可以修改elmentui的配色，例如下面我们修改掉了button的primary配色为黑金色：
修改前：
修改后
修改了elementui 的$message(success类型）颜色为黑金色、图标也修改为金色了：
修改前：
修改后：
2 实现方法
在前端新增一个global.css
添加如下代码:
/* 全局覆盖 Element UI 按钮样式 */
.el-button--primary {background-color: #545c64 !important; /* 黑色背景 */border-color: #000000 !important; /* 黑色边框 */color: #ffd04b !important; /* 金色文字 */
}.el-button--primary:hover, .el-button--primary:focus {background-color: #333333 !important; /* 深黑色背景 */border-color: #333333 !important; /* 深黑色边框 */color: #ffd04b !important; /* 金色文字 */
}/* 自定义 Element UI 消息框样式 */
.el-message {}/* 根据需要自定义不同类型的消息 */
.el-message--success {background-color: #2c2c2c; /* 成功消息背景 */.el-message__content{color: #FFD700; /* 成功消息字体颜色 */}.el-message__icon{color: #FFD700; /* 成功图标颜色 */}
}然后在main.js引入一下
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import './assets/styles/global.css'; // 引入全局样式覆盖文件
就可以实现了，生效需要刷新下页面。
可以看到，通过全局样式修改就简单实现了对elementui原有的配色的覆盖，进而举一反三开发属于自己配色风格的个性化程序了，毕竟帅气是十分重要的。😄