apply custom styling to FluentUI Accordion components (Blazor .NET 8)

Question

I am struggling to figure out how to apply custom styling to elements of the FluentUI Accordion. As an example, I'd like to change the background color of the accordion "heading" element.

Here is the rendered HTML

<fluent-accordion expand-mode="multi"><fluent-accordion-item id="groupA"><span slot="heading">Heading</span>
        item content
    </fluent-accordion-item></fluent-accordion>

And here is an image of the element inspection. fluent-accordion-item div.heading element inspection

If I manually add "background: lightblue;" to the div.heading element (highlighted in the image) through browser inspection I get the desired result, but I can't figure out how to get that same result from source code edits.

Here is my code for the .razor component that generates the above...

@page "/fluentaccordiontest"

@using Microsoft.FluentUI.AspNetCore.Components.DesignTokens
@inject BodyFont BodyFont

<FluentAccordion>
    <FluentAccordionItem Id="groupA" Heading="Heading" >
        item content
    </FluentAccordionItem>
</FluentAccordion>

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await BodyFont.WithDefault("Comic Sans MS");
            StateHasChanged();
        }
    }

}

These other SO questions were similar, but did not result in a working solution for me:

I have attempted to apply styling both via CSS, and also via FluentUI Design Tokens.

Option 1: Design Tokens. This seems a workable solution path (BodyFont is successfully setting font to "Comic Sans MS" in my sample code) but I don't understand how to track down which DesignTokens component I need to set to get a desired styling result. Is there a reference list somewhere with explanations on effect? this was not helpful (enough).

Option 2: CSS. I'd rather set custom styling in CSS than in compiled code, but I've been unsuccessful in finding the right way to do this. I'm weak in CSS, and don't have a good understanding so that I can effectively troubleshoot. Here is the CSS file littered with my attempts. I have a poor understanding of how #shadow-root, :part, :slot are affecting things here but from other misc. reading it seems they are involved. Anybody have CSS code that penetrates to the element?

fluent-accordion::part(.heading) {
    background: lightblue !important;
}

.fluent-accordion-item {
    background: lightblue !important;
}
.fluent-accordion-item.heading {
    background: lightblue !important;
}

.fluent-accordion-item::part(.heading) {
    background: lightblue !important;
}

:host(.heading) {
    background: lightblue !important;
}

:host(fluent-accordion-item) {
    background: lightblue !important;
}

:host(fluent-accordion-item.heading) {
    background: lightblue !important;
}

::slotted(*) {
    background: lightblue !important;
}

S2B · Accepted Answer · 2024-12-06 22:28:47Z

1

I had the same problem and after a bit of mucking around managed to get things working. Important points seem to be that FluentAccordion and FluentAccordionItem need to be wrapped in in order to get the CSS isolation to work. Anyway give this a try:

fluentaccordiontest.razor.css

::deep > fluent-accordion-item::part(heading) {
    background-color: #CE1417 !important;
}

<div>
  <FluentAccordion>
    <div>
      <FluentAccordionItem Expanded="true">
        <HeadingTemplate>
          <div>
            Your header content
          </div>
        </HeadingTemplate>
      </FluentAccordionItem>
      <FluentAccordionItem>
        <HeadingTemplate>
          More Content
        </HeadingTemplate>
        <ChildContent>

        </ChildContent>
      </FluentAccordionItem>
    </div>
  </FluentAccordion>
</div>

answered Dec 6, 2024 at 22:28

S2B

261 bronze badge

Sign up to request clarification or add additional context in comments.

2 Comments

Mitch Dec 8, 2024 at 0:10

Thanks! The <div> wrapper specifically around the <FluentAccordionItem> was the fix. The others were not necessary for me. I'll answer my own question with the shorter code for reference.

Gary Chan Dec 8, 2024 at 7:04

@S2B, Try to cite the official documentation when possible 🙂 Referencing the Blazor documentation - learn.microsoft.com/en-us/aspnet/core/blazor/components/…

Mitch · Accepted Answer · 2024-12-08 00:23:43Z

0

Thanks to S2B for pointing out that <div> wrappers were needed. Below is the shortest code that I was able to get working...

FluentAccordionTest.razor

@page "/dashboard"
<FluentAccordion>
<div>
    <FluentAccordionItem Heading="My Heading" Expanded="true">
            my content
    </FluentAccordionItem>
</div>
</FluentAccordion>

FluentAccordionTest.razor.css

::deep > fluent-accordion-item::part(heading) {
    background-color: yellow;
}

edited Dec 8, 2024 at 0:23

answered Dec 8, 2024 at 0:20

Mitch

31 silver badge2 bronze badges

Collectives™ on Stack Overflow

apply custom styling to FluentUI Accordion components (Blazor .NET 8)

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related