Customization with CSS Isolation

[Michele]

Hi there,

I'm using a tab control in a blazor page and I successfully customized it's aspect using a style tag.

I now tried to move all the css in a razor.css separate file to isolate it, but I can't make it work.

I already tried with ::deep and !important but the page is still using bootstrap5.css for the layout of the tab header instead of what I have in my razor.css file.

    /*Customizzazione tab Header*/
    .e-tab {
        border: 1px solid white;
    }

        .e-tab.e-background .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
            border-color: #507A2A;
            background: #7DBE41;
            border-bottom: 1px solid #7d5f51;
            color: black;
        }

            .e-tab.e-background .e-tab-header .e-toolbar-item.e-active .e-tab-wrap .e-tab-text {
                color: black;
            }

            .e-tab.e-background .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:hover {
                background-color: #7DBE41;
                color: black;
            }

                .e-tab.e-background .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:hover:focus {
                    background-color: #7DBE41;
                    background: #7DBE41;
                    color: black;
                    border: black;
                }

        .e-tab.e-background .e-tab-header .e-toolbar-item:not(.e-active) .e-tab-wrap {
            background-color: #1089C1;
            border: 1px solid white;
            border-bottom: 1px solid white;
        }

            .e-tab.e-background .e-tab-header .e-toolbar-item:not(.e-active) .e-tab-wrap .e-tab-text {
                color: white;
            }

            .e-tab.e-background .e-tab-header .e-toolbar-item:not(.e-active) .e-tab-wrap:hover {
                background-color: #1089C1;
                color: #000;
            }

        .e-tab.e-background .e-tab-header {
            background-color: #f7f6f5; /* #47362E; */
            color: #17a2b8;
        }

and here what I have in my razor.css:

/* Customizzazione tab Header */
::deep .e-tab {
    border: 1px solid white;
}

    ::deep .e-tab .e-tab-header {
        background: #7DBE41 !important;
    }

    ::deep .e-tab.e-background .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
        border-color: #507A2A !important;
        background: #7DBE41 !important;
        border-bottom: 1px solid #7d5f51 !important;
        color: black !important;
    }

        ::deep .e-tab.e-background .e-tab-header .e-toolbar-item.e-active .e-tab-wrap .e-tab-text {
            color: black !important;
        }

        ::deep .e-tab.e-background .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:hover {
            background-color: #7DBE41 !important;
            color: black !important;
        }

            ::deep .e-tab.e-background .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:hover:focus {
                background-color: #7DBE41 !important;
                color: black !important;
                border: black !important;
            }

    ::deep .e-tab.e-background .e-tab-header .e-toolbar-item:not(.e-active) .e-tab-wrap {
        background-color: #1089C1 !important;
        border: 1px solid white !important;
        border-bottom: 1px solid white !important;
    }

        ::deep .e-tab.e-background .e-tab-header .e-toolbar-item:not(.e-active) .e-tab-wrap .e-tab-text {
            color: white !important;
        }

        ::deep .e-tab.e-background .e-tab-header .e-toolbar-item:not(.e-active) .e-tab-wrap:hover {
            background-color: #1089C1 !important;
            color: #000 !important;
        }

    ::deep .e-tab.e-background .e-tab-header {
        background-color: #f7f6f5 !important;
        color: #17a2b8 !important;
    }

[Jafar Ali Shahulhameed]

Hi Michele,

We would like to inform you that we have validated your mentioned query.

The mentioned behavior occurs because the selectors used with ::deep are not specific enough to override Syncfusion and Bootstrap styles. While ::deep allows the styles to reach child elements, CSS specificity still determines which styles take precedence.

To resolve this, you need to:

• Use a custom CssClass on the SfTab
• Increase selector specificity
• Target the exact internal structure used by Syncfusion

Refer the code changes below,

Code Snippet:

// Home.razor

<SfTab CssClass="custom-tab">

    <TabItems>

    …

    </TabItems>

</SfTab>

 

// Home.razor.css

::deep .e-tab.custom-tab {

    border: 3px solid red;

}

Workflow of code snippet:

• CssClass Assignment: Adds custom-tab to root .e-tab element.

• Scoped CSS Application: .razor.css is isolated by Blazor.
• ::deep Usage: Breaks isolation boundary and reaches Syncfusion internal DOM.
• Specificity Increase

·        .custom-tab.e-tab ... ensures:

o   Stronger targeting than .e-tab alone

o   Overrides Bootstrap + Syncfusion styles

Screenshot:

We have attached the sample for your reference,

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorWebAppTabStyles

Also refer below documentation for more information,

CssClass: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTab.html#Syncfusion_Blazor_Navigations_SfTab_CssClass

Check out the shared details and get back to us if you need further assistance.

Regards,

Jafar Ali S