在 SweetAlert2 上自定义 class

Question

I am using SweetAlert2 version 10.13.0 to display an alert box. My problem is that the custom class I placed is not working except for the margin. I referred to the documentation of SweetAlert2 still it is not working.

Here is my code:

const swalWithBootstrapButtons = Swal.mixin({
    confirmButtonClass: 'btn btn-danger',
    cancelButtonClass: 'btn btn-dark mr-2',
    buttonsStyling: false,
});
    
swalWithBootstrapButtons.fire({
        title: 'Data Delete',
        text: 'Are you sure that you want to delete this data?',
        icon: 'info',
        showCancelButton: true,
        confirmButtonText: 'Delete Data',
        reverseButtons: true
    }).then((result) => {
        if (result.value) {
           // AJAX HERE    
        }
});

I placed btn-danger the confirm button should be color red and the cancel button should be black but here is the output. The only thing that is working is the mr-2 but the button color is not (please refer to the output) .

Output Here

Am I missing something or is there anything that I haven't done yet?

Answer 1

As per the documentation, the buttonsStyling option should be outside the object customClass.

const swalWithBootstrapButtons = Swal.mixin({
  customClass: {
    confirmButton: 'btn btn-success',
    cancelButton: 'btn btn-danger mr-2'
  },
  buttonsStyling: false
})

Now, if you can inspect that element on the browser and check if the class is present on the element or not. I can see in the example on the documentation the class names are replaced on the element as it is.

If you can see your class name there then you have to figure out if your CSS has the same styling rules.

See Example

Answer 2

estou usando a versão sweetalert2 v7.12.15, e estou com problemas aqui:

const swalWithBootstrapButtons = swal.mixin({ // Uncaught TypeError: swal.mixin is not a function customClass: { confirmButton: 'btn btn-success', cancelButton: 'btn btn-danger' }, buttonsStyling: false })

                swalWithBootstrapButtons.fire({
                  title: 'Are you sure?',
                  text: "You won't be able to revert this!",
                  icon: 'warning',
                  showCancelButton: true,
                  confirmButtonText: 'Yes, delete it!',
                  cancelButtonText: 'No, cancel!',
                  reverseButtons: true
                }).then((result) => {
                  if (result.isConfirmed)
                  {
                    var jan = window.open("http://127.0.0.1:8000/cadastro/pessoa", "janelaNova");
                  }
                  else if
                  (
                    /* Read more about handling dismissals below */
                    result.dismiss === swal.DismissReason.cancel
                  )
                  {
                    ///
                  }
                })

Alguém pode me ajudar. Obrigado