Salesforce Summer 18更新导致Sweet Alert 2显示异常求助

嘿，这个问题我之前帮客户排查Summer '18升级后的组件问题时碰到过类似情况——Salesforce大版本更新经常会微调Lightning Design System的基础样式，很容易和第三方UI库的样式发生冲突，导致像你说的模态框跑偏到角落的情况。给你几个实际可行的排查和修复思路：

• 给Sweet Alert加上样式隔离的"保护罩"
  Lightning组件的CSS默认是有作用域的，但第三方静态资源的样式很容易被平台全局样式覆盖。你可以给Sweet Alert的容器加个自定义类，然后在组件的CSS文件里强制重置关键定位样式，比如：

  .swal-custom-container {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 99999 !important; /* 确保层级比Lightning自带的弹窗高 */
  }
  

  然后调用Sweet Alert的时候指定这个自定义类：

  Swal.fire({
    customClass: {
      container: 'swal-custom-container'
    },
    // 你的其他弹窗配置
  });
  

• 检查静态资源的加载时机和缓存
  先试试清空浏览器缓存，再去Salesforce后台刷新Sweet Alert的静态资源（Setup → 静态资源 → 找到对应的JS/CSS文件 → 点击「刷新」）——有时候旧的缓存样式会在版本更新后搞出奇怪的问题。另外，确保Sweet Alert的CSS是在组件DOM渲染完成后加载的，你可以在组件的afterRender钩子里面动态引入静态资源，避免被Lightning的初始样式覆盖。

• 用开发者工具揪出冲突的样式
  打开浏览器的开发者工具（按F12），分别在正常环境和Sandbox里检查Sweet Alert弹窗元素的CSS属性，重点对比：

  • position属性是不是被改成了absolute或者relative（正常应该是fixed）
  • top、left、transform这些定位属性有没有被Lightning的样式覆盖
  • z-index值是不是太低，导致弹窗被其他元素压在下面

• 可选：换用Salesforce原生弹窗组件
  如果不想一直折腾样式冲突，其实可以考虑用Salesforce官方的lightning:overlayLibrary组件来做弹窗，它完全适配Lightning生态，大版本更新也不会出现样式跑偏的问题，功能上也能覆盖Sweet Alert的大部分常用场景。

试试上面的方法，应该能解决你的问题！

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