Skip to content Skip to sidebar Skip to footer

How Do I Change Text Color In Sweetalert2?

I want to change the 'title' color in SweetAlert2. How can I do that? Thank you in advance function CustomConfirm(title, message, type) { return new Promise((resolve) => {

Solution 1:

You can use customClass or showClass to get the CSS class for the popup and change the colors in a CSS file from there.

For example:

functionCustomConfirm(title, message, type) {
    returnnewPromise((resolve) => {
        Swal.fire({
            customClass : {
              title: 'swal2-title'
            }
            title: title,
            text: message,
            ...

Then in your CSS

.swal2-title {
  color: red;
}

Solution 2:

Here is my final function:

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

Solution 3:

You need HTML to TRUE and use your own style or class.

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

Post a Comment for "How Do I Change Text Color In Sweetalert2?"