如何为Blazor .NET 8的FluentUI Accordion组件自定义样式

我正尝试为Blazor .NET 8中的FluentUI Accordion组件元素添加自定义样式，比如修改Accordion标题元素的背景色。通过浏览器检查手动给div.heading元素添加background: lightblue;能达到预期效果，但没法通过源码实现同样的效果。

渲染后的HTML结构 #

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

元素检查说明 #

通过浏览器开发者工具可见，需要修改样式的目标是fluent-accordion-item内部的div.heading元素。

对应的Razor组件代码 #

@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();
        }
    }
}

尝试过的解决方案及问题 #

我参考过相关问题但未找到可行方案，目前尝试了两种方式添加样式：

方案1：Design Tokens #

该路径看似可行（示例中BodyFont已成功将字体设置为Comic Sans MS），但不清楚需要设置哪个DesignTokens组件才能修改标题背景色，也找不到带效果说明的参考列表，微软官方文档帮助有限。

方案2：CSS #

我更倾向于通过CSS实现自定义样式，但未找到正确写法。对CSS的#shadow-root、:part、:slot特性理解不足，以下是尝试过的无效代码：

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;
}

内容的提问来源于stack exchange，提问作者Mitch