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