原贴是这样的：el-message样式修改无效怎么搞？-有问必答-CSDN问答

<style lang="scss" scoped>
/*alert 成功弹出框样式*/
.el-message {
  border: 1px dashed blue;
  min-width: 1380px;
}
</style>

 这里的写法是vue2，原来的回答

回答一：

加了scoped后使用到里面样式的dom会添加data-v-xxxx这种属性防止css污染，但是this.$message生成的dom是没有添加data-v-xxx属性的，所以样式无效。

可以用js动态设置，但是还需要修改内部元素的样式操作起来就比较麻烦了

 
        this.$message({
          message:'登录失败',
          center:true,
          type:'error',
          duration:0
        });
        var el=document.querySelector('.el-message');
        if(el)el.style.cssText='  border: 1px dashed blue;  min-width: 1380px;'
 

回答二：

上面的代码是获取到第一个message出现的容器，有bug当同时有多个message弹层，改成下面获取对应的message容器

 
        this.$message({
          message:'登录失败',
          center:true,
          type:'error',
          duration:0
        }).$el;//获取当前弹出的message容器
        if(el)el.style.cssText='  border: 1px dashed blue;  min-width: 1380px;'
 
 

我所在的项目为vue3，针对原来的回答进行了些改进补充：

参考了原贴：使用 --el-message-bg-xxx 可以修改消息提示文字以及背景、边框的颜色

ElMessage({
      customClass :'energyModel',
      type: 'success',
      message: '节能模式设定成功',
      offset:60,
      showClose: true,
      duration:1500,
});
var el=document.querySelector('.energyModel.el-message');
if(el)el[i].style.cssText='  --el-message-bg-color: #cfdbe7; --el-message-border-color: #329fcf; --el-message-text-color: #4787c8; '

 

 

这样能保证切换不同按钮的时候消息弹框都为蓝色不是绿色。 

但是还会产生一个问题，如果快速点击了同一个按钮 还是会出现蓝色，于是改用querySelectorAll，此刻el为一个集合，只用el.style.cssText会报错。

ElMessage({
     customClass :'energyModel',
     type: 'success',
     message: '节能模式设定成功',
     offset:60,
     showClose: true,
     duration:1500,
});
var el=document.querySelectorAll('.energyModel.el-message');
if(el){
     for (var i = 0; i<el.length;i++) {
           el[i].style.cssText='  --el-message-bg-color: #cfdbe7; --el-message-border-color: #329fcf; --el-message-text-color: #4787c8; '
     };
}

 这样就可以了