将自定义样式应用于 FluentUI Accordion 组件 (Blazor .NET 8)

Question

我正在努力弄清楚如何将自定义样式应用于 FluentUI Accordion 的元素。 例如，我想更改手风琴“标题”元素的背景颜色。

这是渲染的 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 元素检查

如果我手动添加“背景：浅蓝色；”通过浏览器检查到 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();
        }
    }

}

这些其他问题是类似的，但没有为我提供有效的解决方案：

• 覆盖 #shadow-root 中 div 的 CSS
• 如何覆盖shadow dom的css样式
• 在 Blazor 中将样式更改为 FluentUI 进度组件

我尝试通过 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;
}

Answer 1

我也遇到了同样的问题，经过一番折腾后终于成功了。重要的一点似乎是 FluentAccordion 和 FluentAccordionItem 需要包装起来才能使 CSS 隔离发挥作用。无论如何，请尝试一下：

流利的手风琴测试.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>