在Angular中使用SweetAlert时如何自定义弹窗的高度？

方案1：绑定自定义CSS类（官方推荐，适合复用场景） #

• 首先在全局样式文件（如styles.scss/styles.css）中添加自定义高度规则：

/* 自定义弹窗高度类 */
.custom-swal-popup {
  height: 500px !important; /* 替换为你需要的高度值 */
  /* 如需控制内部内容滚动，可添加以下规则 */
  .swal2-content {
    max-height: 380px !important;
    overflow-y: auto;
  }
}

• 调整你的调用代码，添加customClass配置项绑定自定义类：

showSuccessAlert() {
  Swal.fire({
    position: 'bottom-right',
    icon: 'success',
    title: 'Success!!!',
    showConfirmButton: true,
    width: '400px',
    // 新增自定义类配置
    customClass: {
      popup: 'custom-swal-popup'
    }
  });
}

如果样式写在组件私有样式文件中，需要加::ng-deep伪类穿透Angular样式隔离，示例如下：

::ng-deep .custom-swal-popup {
  height: 500px !important;
}

方案2：生命周期钩子动态设置（适合单次临时修改场景） #

不需要额外写CSS，直接在didOpen钩子中修改弹窗DOM样式即可：

showSuccessAlert() {
  Swal.fire({
    position: 'bottom-right',
    icon: 'success',
    title: 'Success!!!',
    showConfirmButton: true,
    width: '400px',
    // 新增生命周期钩子动态设置高度
    didOpen: (popupEl) => {
      popupEl.style.height = '500px';
      // 调整内部内容高度可选
      popupEl.querySelector('.swal2-content').style.maxHeight = '380px';
    }
  });
}

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