SweetAlert弹窗正常触发但按钮文字不显示问题求助

问题原因及解决方案 #

• 1. 未手动指定按钮文本，默认值加载异常
     buttons参数仅传true时依赖库的默认文本配置，部分版本或加载场景下会出现默认值丢失的问题，直接手动指定按钮文本即可解决：

swal({
    title: "你确定吗？",
    text: "一旦删除，你将无法恢复这个虚拟文件！",
    icon: "warning",
    // 手动配置两个按钮的显示文本
    buttons: {
        cancel: "取消",
        confirm: "确认删除"
    },
    dangerMode: true,
});

• 2. 版本不匹配，参数写法错误
     如果你引入的是SweetAlert2版本，需要使用对应版本的参数写法，SweetAlert2不兼容buttons: true的写法，修改为对应语法即可：

// SweetAlert2 对应写法
Swal.fire({
    title: "你确定吗？",
    text: "一旦删除，你将无法恢复这个虚拟文件！",
    icon: "warning",
    showCancelButton: true,
    confirmButtonText: "确认删除",
    cancelButtonText: "取消",
    dangerMode: true
})

• 3. 全局CSS样式冲突
     如果修改参数后还是看不到文字，大概率是全局样式覆盖了SweetAlert按钮的文字样式：打开浏览器开发者工具，选中按钮元素检查样式，看是否存在文字颜色和按钮背景色一致、字体大小被设为0的情况，添加以下高优先级样式修复即可：

.swal-button {
    color: #ffffff !important;
    font-size: 14px !important;
}

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