SweetAlert2弹窗高度设置无效及字体大小修改方法咨询

1. height 属性不生效的问题 #

SweetAlert2 本身不支持直接通过配置项的height参数设置弹窗高度，它的弹窗高度默认是根据内容自动计算的。要自定义高度，可以通过以下两种方式实现：

方式1：关闭自动高度+自定义CSS类 #

在配置中添加heightAuto: false关闭自动高度计算，同时通过customClass指定自定义类来控制高度：

const { value: causas } = Swal.fire({
    title: "Titulo",
    text: "Este es el mensaje!",
    input: 'select',
    icon: 'warning',
    showCancelButton: true,
    confirmButtonText: "Confirmar!",
    confirmButtonColor: "#DD6B55",
    cancelButtonText: "Cancelar!",
    width: 800,
    heightAuto: false,
    customClass: {
        popup: 'swal-custom-popup'
    },
    inputOptions: {
        'Causas': {
            cause1: 'c1',
            cause2: 'c2',
            cause3: 'c3',
            cause4: 'c4'
        }
    },
    inputPlaceholder: 'Seleccione el item',
    inputValidator: (value) => {
        return new Promise((resolve) => {
            // 验证逻辑
        })
    }
})

然后添加对应的CSS样式：

.swal-custom-popup {
    height: 800px;
}

方式2：全局CSS覆盖默认类 #

如果不需要单独设置某个弹窗，也可以直接覆盖SweetAlert2的默认弹窗类：

.swal2-popup {
    height: 800px !important;
}

2. 修改弹窗字体大小的方法 #

修改字体大小无需修改插件自带的CSS文件，通过自定义CSS类或覆盖默认类即可实现：

方式1：针对不同区域单独设置 #

通过customClass给标题、内容、按钮等元素指定自定义类，实现精细化控制：

Swal.fire({
    // 其他配置项...
    customClass: {
        title: 'swal-custom-title',
        content: 'swal-custom-content',
        confirmButton: 'swal-custom-btn'
    }
})

对应的CSS样式：

.swal-custom-title {
    font-size: 28px !important;
}
.swal-custom-content {
    font-size: 18px !important;
}
.swal-custom-btn {
    font-size: 16px !important;
}

方式2：全局统一修改弹窗字体 #

直接覆盖默认类，让所有SweetAlert2弹窗都生效：

.swal2-popup {
    font-size: 18px !important;
}
.swal2-title {
    font-size: 24px !important;
}

补充：你代码中的小问题修正 #

• 重复设置了showCancelButton: true，建议删除其中一个
• 变量fruit应该改为causas，因为你解构的是value: causas，否则会出现未定义错误

修改后的完整代码示例：

const { value: causas } = Swal.fire({
    title: "Titulo",
    text: "Este es el mensaje!",
    input: 'select',
    icon: 'warning',
    showCancelButton: true,
    confirmButtonText: "Confirmar!",
    confirmButtonColor: "#DD6B55",
    cancelButtonText: "Cancelar!",
    width: 800,
    heightAuto: false,
    customClass: {
        popup: 'swal-custom-popup',
        title: 'swal-custom-title',
        content: 'swal-custom-content'
    },
    inputOptions: {
        'Causas': {
            cause1: 'c1',
            cause2: 'c2',
            cause3: 'c3',
            cause4: 'c4'
        }
    },
    inputPlaceholder: 'Seleccione el item',
    inputValidator: (value) => {
        return new Promise((resolve) => {
            if (!value) {
                resolve('Por favor seleccione un item!')
            } else {
                resolve()
            }
        })
    }
})

if (causas) {
    Swal.fire(`Seleccionaste: ${causas}`)
}

配套CSS：

.swal-custom-popup {
    height: 800px;
}
.swal-custom-title {
    font-size: 28px;
}
.swal-custom-content {
    font-size: 18px;
}

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