Changing background on toolbar also changes it on tabItems

[Ben Junior]

On the code below, the setting used to change the toolbar background-color work as expected, except that it is also applied on the TabItems. I've tried to find how to prevent it, using the F12 tools but I wasn't able to. 

<style>

    /*To Apply background color to Toolbar items*/

    .e-toolbar,

    .e-toolbar .e-toolbar-items,

    .e-toolbar .e-toolbar-items .e-toolbar-item,

    .e-toolbar .e-toolbar-items .e-toolbar-item button {

        background-color: aquamarine !important;

    }

        /*To Apply background color while select/hover/focus the Toolbar button*/

        .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:hover,

        .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:active,

        .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:focus {

            background-color: gray !important;

        }

</style>

<SfTab CssClass="default-tab e-fill">

    <TabAnimationSettings><TabAnimationPrevious Effect=AnimationEffect.None /><TabAnimationNext Effect=AnimationEffect.None /></TabAnimationSettings>

    <TabItems>

        <TabItem>

            <HeaderTemplate>

                <div class="e-title">TAB AAAA</div>

            </HeaderTemplate>

            <ContentTemplate>

                <div style="margin-top:5px;">

                    <SfToolbar Width="100%" OverflowMode="@OverflowMode.Popup">

                        <ToolbarItems>

                            <ToolbarItem Type="@ItemType.Button" Text="List All" />

                            <ToolbarItem Type="@ItemType.Button" Text="Authorize" />

                            <ToolbarItem Type="@ItemType.Button" Text="Revoke" />

                            <ToolbarItem Type="@ItemType.Button" Text="More" />

                        </ToolbarItems>

                    </SfToolbar>

                </div>

            </ContentTemplate>

        </TabItem>

        <TabItem>

            <HeaderTemplate><div class="e-title">BBBBBB</div></HeaderTemplate>

        </TabItem>

        <TabItem>

            <HeaderTemplate><div class="e-title">CCCCCC</div></HeaderTemplate>

        </TabItem>

    </TabItems>

</SfTab>

[Satheesh Kumar Balasubramanian]

Hi Ben, 

  

Greetings from Syncfusion Support. 

  

We have validated your reported query "Changing background on toolbar also changes it on tabItems" and suggest you to define CssClass property for toolbar to overcome the style overriding issue. 

  

Code snippet:  

  

                     <SfToolbar CssClass="fill-class" Width="100%" OverflowMode="@OverflowMode.Popup"> 

                        <ToolbarItems> 

                            <ToolbarItem Type="@ItemType.Button" Text="List All" /> 

                            <ToolbarItem Type="@ItemType.Button" Text="Authorize" /> 

                            <ToolbarItem Type="@ItemType.Button" Text="Revoke" /> 

                            <ToolbarItem Type="@ItemType.Button" Text="More" /> 

                        </ToolbarItems> 

                    </SfToolbar> 

  

<style> 

    /*To Apply background color to Toolbar items*/ 

    .e-toolbar.fill-class, 

    .e-toolbar.fill-class .e-toolbar-items, 

    .e-toolbar.fill-class .e-toolbar-items .e-toolbar-item, 

    .e-toolbar.fill-class .e-toolbar-items .e-toolbar-item button { 

        background-color: aquamarine !important; 

    } 

  

    /*To Apply background color while select/hover/focus the Toolbar button*/ 

    .e-toolbar.fill-class .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:hover, 

    .e-toolbar.fill-class .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:active, 

    .e-toolbar.fill-class .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:focus { 

        background-color: gray !important; 

    } 

</style> 

  

  

Sample: https://www.syncfusion.com/downloads/support/forum/159502/ze/TabComponent-627387867 

  

Kindly try the above sample and get back to us if you need further assistance. 

Regards, 

Satheesh Kumar B