一、前言
在窄屏模式下（移動端），提示框的寬度太寬，希望降低寬度。
應當如何修改 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;
}
}
 

————————————————
版權宣告：本文為CSDN博主「小峰同學的前端之路」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處連結及本宣告。
原文連結：https://blog.csdn.net/abc465200/article/details/110522100