Применить собственный стиль к компонентам FluentUI Accordion (Blazor .NET 8) ⇐ CSS

[Anonymous]

Я пытаюсь понять, как применить собственный стиль к элементам FluentUI Accordion. В качестве примера я хотел бы изменить цвет фона элемента «заголовок» аккордеона.
Вот визуализированный HTML
Heading
item content


А вот изображение проверки элемента.
fluent-accordion-item проверка элемента div.heading
Если я добавлю вручную "фон: голубой;" к элементу div.heading (выделен на изображении) посредством проверки браузера я получаю желаемый результат, но не могу понять, как получить тот же результат при редактировании исходного кода.
Вот мой код компонента .razor, который генерирует приведенное выше...
@page "/fluentaccordiontest"

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



item content



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

}

Эти другие вопросы SO были похожими, но не привели к моему рабочему решению:

• Переопределение CSS div внутри #shadow-root
• Как переопределить стиль CSS теневого dom
• Изменить стили на компонент прогресса FluentUI в Blazor

Я пытался применять стили как с помощью CSS, так и с помощью токенов дизайна FluentUI.
Вариант 1: токены дизайна. Это кажется работоспособным путем решения (BodyFont успешно устанавливает шрифт «Comic Sans MS» в моем примере кода), но я не понимаю, как отследить, какой компонент DesignTokens мне нужно установить, чтобы получить желаемый результат стилизации. Есть ли где-нибудь список литературы с пояснениями по действию? это не помогло (достаточно).
Вариант 2: CSS. Я бы предпочел установить собственный стиль в CSS, а не в скомпилированном коде, но мне не удалось найти правильный способ сделать это. Я слаб в CSS и не обладаю хорошим пониманием, чтобы эффективно устранять неполадки. Вот CSS-файл, наполненный моими попытками. Я плохо понимаю, как #shadow-root, :part, :slot влияют здесь, но не на другие вещи. читая кажется, что они участвуют. У кого-нибудь есть код CSS, который проникает в элемент?
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;
}


Подробнее здесь: https://stackoverflow.com/questions/791 ... azor-net-8