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原有的配色的覆盖，进而举一反三开发属于自己配色风格的个性化程序了，毕竟帅气是十分重要的。😄
