一、前言
在窄屏模式下（移動端），提示框的寬度太寬，希望降低寬度。
應當如何修改 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>
image.png
此時在scoped的style中寫是無效的，因為ElementUI組件不可以給樣式添加scoped，因此必須去掉scoped；但是去掉scoped后不滿足單組件的CSS。
三、解決方案
1、附加在沒有scoped的style中
<style scoped> ... </style> <style> ... .el-message-box { width: 350px; } </style> 作者：CNSTT
鏈接：https://www.jianshu.com/p/65221ec46c07
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。