How to style the alert box on page refreshing before submitting the form

$(document).ready(function () {
  $('form').submit(function(){
      isSubmitting = true
  })
  $('form').data('initial-state', $('form').serialize());
  $(window).on('beforeunload', function() {

      return  Swal.fire({
        title: "Are you sure?",
        text: "Once deleted, you will not be able to recover this imaginary file!",
        icon: "warning",
        buttons: true,
        dangerMode: true,
      })
      .then((willDelete) => {
        if (!isSubmitting && $('form').serialize() != $('form').data('initial-state')){
          Swal.fire("Poof! Your imaginary file has been deleted!", {
            icon: "success",
          });
        } else {
          Swal.fire("Your imaginary file is safe!");
        }
      });
     // return 'You have unsaved changes which will not be saved.'

    }
  );
});

I'm using above code to show alert on page refreshing.
How to show a customization styling alert box instead of default in react or is there any other way to show popup