如何更改 SweetAlert2 中的文本颜色？答案

【问题标题】：How do I change text color in SweetAlert2?如何更改 SweetAlert2 中的文本颜色？
【发布时间】：2021-08-03 15:44:29
【问题描述】：

我想更改 SweetAlert2 中的“标题”颜色。我怎样才能做到这一点？提前谢谢你

function CustomConfirm(title, message, type) {
    return new Promise((resolve) => {
        Swal.fire({
            title: title,
            text: message,
            icon: type,
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#6e7d88',
            confirmButtonText: 'Yes',
            cancelButtonText: "No"
        }).then((result) => {
            if (result.isConfirmed) {
                resolve(true);
            } else {
                resolve(false);
            }
        });
    });
}

【问题讨论】：

标签： javascript sweetalert2

【解决方案1】：

您可以使用 customClass 或 showClass 获取弹出窗口的 CSS 类并从那里更改 CSS 文件中的颜色。

例如：

function CustomConfirm(title, message, type) {
    return new Promise((resolve) => {
        Swal.fire({
            customClass : {
              title: 'swal2-title'
            }
            title: title,
            text: message,
            ...

然后在你的 CSS 中

.swal2-title {
  color: red;
}

【讨论】：

谢谢...很有帮助

【解决方案2】：

这是我的最终功能：

        Swal.fire({
        title: "<h5 style='color:red'>" + title + "</h5>",
        text: message,
        icon: type,
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#6e7d88',
        confirmButtonText: 'Yes',
        cancelButtonText: "No"
    })

【讨论】：

【解决方案3】：

您需要 HTML 为 TRUE 并使用您自己的样式或类。

title: "HTML <h1 style='color:red'>Title</h1>",
html: true

【讨论】：

感谢您的快速回答。
这个答案没有任何意义