Vue ElementUI 如何修改訊息提示框樣式---messageBox

一、前言
在窄屏模式下（移動端），提示框的寬度太寬，希望降低寬度。
應當如何修改 ElementUI 的樣式呢？

二、情景還原

// 彈出登出提示框
this.$confirm('確認登出嗎?', '提示', {
}).then(() => {
  this.$message({
    message: '已成功登出',
    type: 'success'
  })
}).catch(() => { /* 使用者取消登出 */ })
...
<style scoped>
  ...
  .message-logout {
    width: 350px;
  }
</style>

// 彈出登出提示框
this.$confirm('確認登出嗎?', '提示', {
}).then(() => {
  this.$message({
    message: '已成功登出',
    type: 'success'
  })
}).catch(() => { /* 使用者取消登出 */ })
...
<style scoped>
  ...
  .el-message-box {
    width: 350px;
  }
</style>

此時在scoped的style中寫是無效的，因為ElementUI元件不可以給樣式新增scoped，因此必須去掉scoped；但是去掉scoped後不滿足單元件的CSS。

三、解決方案

1、附加在沒有scoped的style中

<style scoped>
  ...
</style>
<style>
  ...
  .el-message-box {
    width: 350px;
  }
</style>

2、給訊息提示框加類名（薦）
更加推薦為這個messageBox新增一個類名，比較科學並且不會影響到其他。

// 彈出登出提示框
this.$confirm('確認登出嗎?', '提示', {
  customClass: 'message-logout'
}).then(() => {
  this.$message({
    message: '已成功登出',
    type: 'success'
  })
}).catch(() => { /* 使用者取消登出 */ })
...
<style scoped>
  ...
</style>
<style>
  ...
  .message-logout {
    width: 350px;
  }
</style>

或者直接important

@media (max-width: 730px) {
  .message-logout{
    width: 300px !important;
  }
 }