I define a className to customize a sweetAlert2 but apparently the styling wont apply to the sweet alert. I called the class name everything but nothing seems to work. could the problem be with main css file for this package ?

swal.fire({
   title: Welcome,
   className: styleTitle
});

The CSS

.styleTitle{
   font-size: 25px;
}

I define a className to customize a sweetAlert2 but apparently the styling wont apply to the sweet alert. I called the class name everything but nothing seems to work. could the problem be with main css file for this package ?

swal.fire({
   title: Welcome,
   className: styleTitle
});

The CSS

.styleTitle{
   font-size: 25px;
}

• javascript
• css
• vue.js
• sweetalert2
• nuxt.js

2 Answers 2

I found this on the documentation it may help you.

Apparently you have to define customClass instead of className.

Here is an example.

.confirm-button-class {
  background-color: red !important;
  color: white !important;
  border: none !important;
}

.title-class {
  font-size: 15px !important;
}


.icon-class {
  font-size: 10px !important;
}

.confirm-button-class .swal2-icon svg {
  width: 12px !important;
  height: 12px !important;
}

.swal2-actions .swal2-confirm {
  background-color: #f1c40f !important;
  color: white !important;
  border: none !important;
  box-shadow: none !important;
}

.swal2-actions .swal2-cancel {
  border-color: #f1c40f !important;
  box-shadow: none !important;
  border: none !important;
}

.swal2-confirm:focus, .swal2-cancel:focus {
  box-shadow: none !important;
  border: none !important;
}

.swal2-actions button:hover {
  border: none !important;
}

below is the customized sweetalert2

 Swal.fire({
      icon: 'warning',
      title: 'Are you sure?',
      text: 'This action cannot be undone.',
      showCancelButton: true,
      confirmButtonText: 'Yes, delete it!',
      cancelButtonText: 'No, cancel!',
      customClass: {
        confirmButton: 'confirm-button-class',
        title: 'title-class',
        icon: 'icon-class'
      },
      html: `
        <div style="max-height: 300px; overflow-y: scroll;">
          ${allItems.map((item) => `
            <div key="${item.asset_number}">
              <div>
                <p>Name: ${item.name}</p>
                <p>Address: ${item.address}</p>
              </div>
              <hr style="border-color: gray; border-width: 1px; margin: 10px 0;" />
            </div>
          `).join('')}
        </div>
      `,
    }).then((result) => {
      if (result.isConfirmed) {
        Swal.fire('Deleted!', 'Your item has been deleted.', 'success');
      } else if (result.isDismissed) {
        Swal.fire('Cancelled', 'Your item is safe :)', 'error');
      }
    });

Hope this will help you.