CustomClass adds to buttons but does not replace

[Uwe Keim]

Having this code:

var result = await Swal.FireAsync(
    new SweetAlertOptions
    {
        Title = "Really delete ticket?",
        Text = "Do you really want to permanently delete the ticket?",
        Icon = SweetAlertIcon.Question,
        ShowCancelButton = true,
        FocusCancel = true,
        ConfirmButtonText = "Delete ticket",
        CancelButtonText = "Cancel",
        CustomClass = new SweetAlertCustomClass
        {
            ConfirmButton = @"btn btn-outline-primary",
            CancelButton = @"btn btn-outline-secondary"
        }
    });

I'm trying to apply Bootstrap styles btn btn-outline-primary and btn btn-outline-secondary to the SweetAlert2 buttons.

In my normal Blazor forms, these buttons look like this:

In a SweetAlert2 dialog, they look like this, though:

I.e. they look the same as without using the CustomClass property.

Having a deeper look at the generated HTML in Chrome's F12 tools, the generated markup looks like this:

<button 
    type="button" 
    class="swal2-confirm btn btn-outline-primary swal2-styled" 
    aria-label="" 
    style="display: inline-block; border-left-color: rgb(48, 133, 214); border-right-color: rgb(48, 133, 214);">
    Delete ticket
</button>

I.e. not only is my own class definition set to the class attribute of the <button> but in addition, the existing classes swal2-confirm, swal2-styled are still present, and also a style attribute is set with inline CSS.

I'm using a dark Windows theme, so the @media (prefers-color-scheme: dark) should somewhere kick in.

My expected behaviour is that only the classes I explicitely set are present in the buttons, no other classes, no inline CSS.

There is an example on the original SweetAlert2 website (Search for "bootstrap" on the page to find it).

I'm using your latest library on a German Windows 10 64 Bit with dark colors and Google Chrome version 81.0.4000.3 (official build) dev (64-Bit).

[Michael Currie]

I believe you also need to set ButtonsStyling = false

On the SweetAlert documentation you linked, the mixin that defined the custom class also sets the buttonsStyling property. This is necessary to remove the original classes.

[Uwe Keim]

That did the trick, thank you!

Since the buttons are now "glued" together, I did add mr-1 as an additional class to the first button:

…
ConfirmButton = @"btn btn-outline-primary mr-1",
CancelButton = @"btn btn-outline-secondary"
…

(mr-1 is a Bootstrap 4.x class to add a right margin).