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

Question

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

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);
            }
        });
    });
}

Answer 1

您需要 HTML 为真并使用您自己的风格或 class。

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

Answer 2

这是我的最终函数：

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

Answer 3

您可以使用 customClass 或 showClass 获取弹出窗口的 CSS class 并从那里更改 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;
}

Answer 4

您可以尝试将此代码添加到全局 CSS:

Swal.fire({
  title: 'Testing Custom Styles',
  html: 'Good Job',
  icon: 'success'
})

.swal2-container.swal2-center>.swal2-popup{
  background-color: #121212 !important;
}
.swal2-html-container, .swal2-title{
  color: white !important;
}

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.8/dist/sweetalert2.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

How do I change text color in SweetAlert2?

javascript

sweetalert2