修改SweetAlert2 CSS样式后未生效，弹窗显示异常求解决

问题背景 #

使用SweetAlert2的分步弹窗时，期望显示正常居中的分步弹窗，但实际显示异常。经排查，问题源于SweetAlert2添加的以下样式：

body.swal2-height-auto {
    height: auto !important;
}

取消该样式的height: auto !important后弹窗可正常显示，但尝试修改插件CSS、添加customClass覆盖均未生效。

有效解决方案 #

方案1：直接覆盖body样式（推荐，不修改插件源码） #

在项目的global.scss中添加更高优先级的样式，确保覆盖插件默认样式：

body.swal2-height-auto {
  height: 100% !important;
}

注意：需保证global.scss在SweetAlert2的CSS之后加载（比如在Vue/React项目中，将全局样式的导入放在插件样式导入之后），同时清除浏览器缓存或重新构建项目，确保新样式生效。

方案2：关闭SweetAlert2的自动高度调整（最干净） #

在弹窗初始化时添加heightAuto: false配置，从根源上阻止插件给body添加异常样式：

const steps = ['1', '2', '3']
const swalQueueStep = Swal.mixin({
  heightAuto: false, // 禁用自动修改body高度
  confirmButtonText: 'Forward',
  cancelButtonText: 'Back',
  progressSteps: steps,
  input: 'text',
  reverseButtons: true,
  validationMessage: 'This field is required'
})

方案3：修改插件源码（不推荐） #

若坚持修改插件CSS，需确保修改的是项目中实际被打包的SweetAlert2样式文件（如node_modules/sweetalert2/dist/sweetalert2.css），修改后清除浏览器缓存并重新构建项目。但此方法会在插件更新时丢失修改，不建议使用。

为什么之前的方法无效？ #

• 修改插件CSS未生效：多为浏览器缓存旧样式，或打包工具未重新编译插件资源；
• 添加container--modifier无效：该类作用于弹窗容器，而问题样式作用于body标签，作用对象不同，无法覆盖body的样式。

内容的提问来源于stack exchange，提问作者SimonIoa