Vue——ElementUI 如何修改消息提示框样式

前言

需求将弹出框添加样式，图1是原图，图2是需要实现的样式，我按照最原始的办法，找到类名，然后修改css,但是无论我新添加个类名也好，还是/deep/深度修改，都无法修改其样式，后经过研究，发现了问题，下面将我的代码和大家分享一下。

（图1）

(图2)

代码分析

// 弹出警告提示框
this.$confirm('确认删除吗?', '警告', { type: 'warning'})
.then(() => {
  this.$message({
    message: '删除成功',
    type: 'success'
  })
}).catch(() => {})
...
<style lang="scss" scoped>
  ...
   .el-message-box__header{
    padding: 13px;
    border-bottom: #4970ad 2px solid;
    .el-message-box__title{
      font-size: 20px;
      color: #4970ad;
    }
  }
  .el-message-box__headerbtn{
    width: 30px!important;
    height: 30px!important;
    background: white;
    border: 2px solid #999;
    top: 10px;
    border-radius: 50%;
  }
  .el-message-box__headerbtn .el-message-box__close{
    color: #999999!important;
    line-height: 26px;
    font-weight: bold;
    font-size: 16px;
  }
</style>

因为多次修改无法改变其样式，所以发现在scoped的style中修改它的样式是无效的，因为ElementUI组件不可以给样式添加scoped。因此要想修改其样式就一定要去掉scoped，但是如果去掉scoped后，又不满足单组件的CSS样式，所以我们在写个style，附加在没有scoped的style中就可以实现了。

修改部分代码

<style lang="scss" scoped>
  ...
</style>
<style lang="scss" >
  ...
   .el-message-box__header{
    padding: 13px;
    border-bottom: #4970ad 2px solid;
    .el-message-box__title{
      font-size: 20px;
      color: #4970ad;
    }
  }
  .el-message-box__headerbtn{
    width: 30px!important;
    height: 30px!important;
    background: white;
    border: 2px solid #999;
    top: 10px;
    border-radius: 50%;
  }
  .el-message-box__headerbtn .el-message-box__close{
    color: #999999!important;
    line-height: 26px;
    font-weight: bold;
    font-size: 16px;
  }
</style>

然后图1就变成图2啦！

总结

修改样式时，先看其样式是否是局部单组件样式scoped，如果有，一定要注意，因为它会影响局部样式修改，所以当你样式无法修改，一定要检查下是否是scoped对其干扰了。