CSS Styles not Being Aplied to Syncfusion Buttons Inside a Grid

[Alexandre]

Hello,

I have a grid with buttons in some of the columns. This buttons are meant to be colored, but no matter what I do, they always appear as gray.
What could I be missing in my CSS file?

Button Code:

        <!-- Status da Placa -->
        <GridColumn HeaderText="Status" Width="10%" TextAlign="TextAlign.Center">
            <Template>
                @{
                    var data = (context as PlacaBronze);
                }
                <SfButton CssClass="@(data.Status ? "btn-success text-white" : "btn-danger-status text-white")"
                          OnClick="() => ToggleStatus(data.PlacaBronzeId)">
                    @(data.Status ? "Ativo" : "Inativo")
                </SfButton>
            </Template>
        </GridColumn>


        <!-- Botões de Ação -->
        <GridColumn HeaderText="Ações" Width="15%" TextAlign="TextAlign.Center">
            <Template>
                @{
                    var data = (context as PlacaBronze);
                }
                <div class="button-group">
                    <SfButton CssClass="btn-primary" OnClick="() => EditPlacaBronze(data.PlacaBronzeId)">
                        <i class="fas fa-edit"></i>
                    </SfButton>


                    <SfButton CssClass="btn-danger" OnClick="() => ConfirmDelete(data.PlacaBronzeId)">
                        <i class="fas fa-trash-alt"></i>
                    </SfButton>


                    <SfButton CssClass="btn-warning" OnClick="() => ConfirmDesvincula(data.PlacaBronzeId)">
                        <i class="fas fa-car-crash"></i>
                    </SfButton>
                </div>
            </Template>
        </GridColumn> 

Button CSS:

/* 🟦 Force Primary Button Background */
.btn-primary.e-control, .btn-primary.e-control.e-btn {
    background-color: #007bff !important;
}


/* 🔴 Force Danger Button Background */
.btn-danger.e-control, .btn-danger.e-control.e-btn {
    background-color: #dc3545 !important;
}


/* 🟧 Force Warning Button Background */
.btn-warning.e-control, .btn-warning.e-control.e-btn {
    background-color: #fd7e14 !important;
}


/* ✅ Force Success Button Background */
.btn-success.e-control, .btn-success.e-control.e-btn {
    background-color: #28a745 !important;
}


/* ❌ Force Danger Status Button Background */
.btn-danger-status.e-control, .btn-danger-status.e-control.e-btn {
    background-color: #dc3545 !important;
}


/* 🔹 Ensure buttons are not overridden by Syncfusion */
.e-btn {
    background-color: transparent !important;
}


    /* 🔹 Force white text and icon colors */
    .btn i, .btn span, .e-btn i {
        color: white !important;
    }

[Alex Harson James Henso]

Hi Alexandre,

We have validated your reported query with the provided code snippet, but we are unable to reproduce your reported query on our end. Refer to the below attached sample.

If you are still facing the issue, kindly share the issue-replicate sample or modify our sample to replicate the issue with a video demonstration. Based on your details, we will check and provide the better solution.

Regards,

YuvanShankar A

Attachment: BlazorAppnugetpackage_b5334acb.zip

[Alexandre]

Hello,

It worked! I put your Style Code inside the Razor Component instead of putting it on different file.

Thank you very much.

[YuvanShankar Arunagiri]

You are welcome, Alexandre. Please get back to us if you need any further assistance on this.

If that post is helpful, please consider accepting it as the solution so that other members can locate it more quickly.