如何为Blazor全局应用Fluent UI主题（含调色板）

一、全局调色板（设计令牌）的全局应用 #

1. 扩展ThemeProvider支持全量令牌 #

官方ThemeProvider默认仅覆盖部分令牌，但可通过自定义Theme实例注入全局配置。在Program.cs中注册全局主题：

builder.Services.AddFluentUIComponents();
builder.Services.AddScoped(sp => new Theme
{
    Palette = new Palette
    {
        Primary = "#你的主色值",
        Secondary = "#你的辅助色值",
        // 按需配置其他调色板属性
    },
    Typography = new Typography
    {
        FontWeights = new FontWeights
        {
            Bold = 700 // 全局设置字体加粗权重
        }
    }
});

随后在App.razor中用FluentThemeProvider包裹根组件：

<FluentThemeProvider>
    <Router AppAssembly="@typeof(App).Assembly">
        <!-- 路由及页面内容 -->
    </Router>
</FluentThemeProvider>

2. 用CSS变量+::part()穿透Shadow Root #

对于支持CSS变量的组件，可通过:root定义全局变量，再用::part()选择器穿透Shadow Root修改样式：

:root {
    --custom-primary: "#你的主色值";
}

fluent-button::part(control) {
    background-color: var(--custom-primary);
    font-weight: bold; /* 直接设置字体加粗 */
}

注：::part()后的部件名称（如control）可通过浏览器开发者工具查看组件Shadow Root内元素的part属性获取。

二、覆盖非设计令牌的全局样式 #

1. 全局类+组件批量应用 #

先在app.css中定义全局样式类：

.custom-bold-btn {
    font-weight: 700 !important;
}

再通过Blazor组件继承封装自定义按钮，统一应用样式：

@inherits FluentButton
@attributes(AdditionalAttributes)
@ChildContent

@code {
    protected override void OnInitialized()
    {
        if (!AdditionalAttributes.ContainsKey("class"))
        {
            AdditionalAttributes.Add("class", "custom-bold-btn");
        }
        else
        {
            AdditionalAttributes["class"] = $"{AdditionalAttributes["class"]} custom-bold-btn";
        }
        base.OnInitialized();
    }
}

项目中统一使用这个自定义按钮组件，即可实现全局样式覆盖。

三、补充说明 #

• 优先通过ThemeProvider配置设计令牌，因为多数组件的Shadow Root内部CSS变量基于设计令牌生成，能实现更统一的主题效果。
• 若组件未暴露可定制part，可查看官方组件API文档，确认是否有可配置参数或自定义样式入口。

内容的提问来源于stack exchange，提问作者Koert van Kleef