How can i override the FluentTabs activeIndicator style it doesn't work and i don't find any example explaining how to do it

[jobou363]

i have a razor page and i want to change the activeIndicator style from fluent ui :

by default the ui show the selected tab with a blue underline but i want to add a background to make it look more like a tab.

<FluentTabs ActiveTabId="tab-1" >

          <FluentTab Id="tab-1" >
                    <Header>                        
                        <span Class="ps-1">Identification</span>
                    </Header>
                </FluentTab>                
                <FluentTab Id="tab-1" >
                    <Header>                        
                        <span Class="ps-1">Identification</span>
                    </Header>
                </FluentTab>          
</FluentTabs>

I found the original css style code on the fluent ui git hub but when i try to override it it doesn't work.

https://github.com/microsoft/fluentui/blob/3df6e4cf274b9811b7a279d9f611d8a6c20fdab8/packages/web-components/src/tabs/tabs.styles.ts#L45

Original code

.activeIndicator {
     grid-row: 2;
        grid-column: 1;
        width: 20px;
        height: 3px;
        border-radius: calc(${controlCornerRadius} * 1px);
        justify-self: center;
        background: ${accentFillRest};
}

Override code

.activeIndicator {
     background: red;
}

[jobou363]

I found an alternative solution by using those css classes to ovewrite the css style.

::deep fluent-tab[aria-selected="true"] {
background-color: var(--neutral-stroke-layer-hover);
}

::deep fluent-tab[aria-selected="true"]::before {
    content: "";
    position: relative;
    transform: translateX(-100%);
    width: 3px;
    height: calc(((var(--base-height-multiplier) + var(--density)) * var(--design-unit) / 2) * 1.2px);
    background: var(--accent-fill-rest);
}

::deep fluent-tab[aria-selected="true"]::before {
    left: calc(var(--focus-stroke-width) * 0.1px);
}