如何在Blazor（MAUI混合应用）中为FluentUI组件设置样式？

一、先解决CSS类样式不生效的问题 #

1. 使用Blazor深度选择器（::deep） #

Blazor组件级CSS（mycomponent.razor.css）默认带作用域隔离，无法直接作用于FluentUI组件，需要用::deep穿透作用域：

组件代码（mycomponent.razor）：

<FluentHeader Class="custom-header">
    Header text
</FluentHeader>

对应的组件CSS（mycomponent.razor.css）：

::deep .custom-header {
    background-color: blueviolet;
    /* 若仍被默认样式覆盖，可添加!important提升优先级 */
    /* background-color: blueviolet !important; */
}

2. 使用全局CSS文件 #

将样式放到wwwroot/css/app.css这类全局CSS文件中，避免作用域限制：

.custom-header {
    background-color: blueviolet;
}

然后组件中直接引用类名即可，注意避免类名冲突。

二、官方推荐：使用FluentUI设计令牌定制样式 #

FluentUI基于设计系统构建，推荐用设计令牌统一管理样式，避免CSS冲突：

1. 组件内局部设置 #

在目标组件中注入DesignTokenProvider，修改对应令牌值：

@inject Microsoft.FluentUI.AspNetCore.Components.DesignTokenProvider TokenProvider

<FluentHeader>
    Header text
</FluentHeader>

@code {
    protected override async Task OnInitializedAsync()
    {
        // 获取Header背景色令牌并设置值
        var bgToken = TokenProvider.GetToken<ColorToken>("HeaderBackgroundColor");
        await bgToken.SetValueAsync(Color.FromHex("#8A2BE2")); // blueviolet的十六进制值
    }
}

2. 全局设置（所有同类型组件生效） #

在App.razor中全局配置令牌，影响所有FluentUI组件：

@inject Microsoft.FluentUI.AspNetCore.Components.DesignTokenProvider TokenProvider

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

@code {
    protected override async Task OnInitializedAsync()
    {
        var headerBgToken = TokenProvider.GetToken<ColorToken>("HeaderBackgroundColor");
        await headerBgToken.SetValueAsync(Color.BlueViolet);
    }
}

三、更简便的方式：直接使用组件参数 #

部分FluentUI组件提供了直接设置样式的参数，比如FluentHeader支持BackgroundColor属性：

<FluentHeader BackgroundColor="Color.BlueViolet">
    Header text
</FluentHeader>

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