How to modify the background of FluentAnchor?

[weijiafs]

I want to customize an appbar and add the FluentAnchor implementation link, but I cannot modify the background of FluentAnchor.
Setting AccentBaseColor and FillColor does not take effect.

please help me, thanks.

<FluentLayout>
    @* <FluentHeader Style="background-color:transparent"> *@
    <FluentHeader>

        <FluentGrid Spacing="3" Justify="JustifyContent.FlexStart">
            <FluentGridItem sm="12" HiddenWhen="GridItemHidden.Xs">
                <FluentStack Orientation="Orientation.Horizontal">
                    <FluentIcon Value="@(new Icons.Regular.Size32.HomeMore())" />
                    <FluentDesignSystemProvider AccentBaseColor="#FF0000" FillColor="#FF0000" StrokeWidth="1">
                         <FluentAnchor Href="#" Appearance="Appearance.Neutral">Accent11</FluentAnchor>
                    </FluentDesignSystemProvider>
                </FluentStack>
            </FluentGridItem>

            <FluentGridItem xs="12" HiddenWhen="GridItemHidden.SmAndUp">
                <div style="display:flex; width=100%">
                    Some Header Text
                    <FluentSpacer />
                    Aligned to the end
                </div>
            </FluentGridItem>
        </FluentGrid>
    </FluentHeader>
</FluentLayout>

[vnbaaij]

There is an exact example of that shown here: https://fluentui-blazor.net/Anchor#appearance

[chrpai]

@vnbaaij I've read through the examples and I've noticed that Anchor seems to be the only one with a css tab as part of it's example source. Should I take this to imply anything?

[vnbaaij]

Nothing other then that it is one of the few examples that uses it's own css file (or we forgot to include it in others) 😁

[weijiafs]

I tested using this method, but still cannot modify the background color.

MainLayout.razor

@inherits LayoutComponentBase

<FluentLayout>
    <FluentHeader>
        <FluentAnchor Class="specialbg" Href="#" Appearance="Appearance.Hypertext">Appearance.Hypertext</FluentAnchor>
    </FluentHeader> 
</FluentLayout>

MainLayout.razor.css

::deep fluent-anchor.specialbg.hypertext::part(control) {
    background-color: bisque;
}

[vnbaaij]

I think you need to read up on the ::deep selector: https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-8.0#child-component-support
The ::deep pseudo-element only works with descendant elements. So you probably need to wrap your anchor in a div