Custom styling for Sweet alert 2

Question

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

Mitten

Answer 1

I found this on the documentation it may help you.

Apparently you have to define customClass instead of className.

Here is an example.

Sangsanger

Oh forgot to paste that my bad that's not the issue thou – Mitten

Oh, and how do you import the css? – Sangsanger

its vue im using so import css on the same page/ file – Mitten

yh i think that should help thanks the official docs told me i could use class Name – Mitten

Answer 2

.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.

Benzel