MudBlazor布局页面主题切换按钮无响应问题求助

问题核心原因 #

你的布局组件继承自LayoutComponentBase，默认采用静态服务器渲染模式，但内部MudBlazor组件单独设置了@rendermode="InteractiveAuto"，这种混合渲染模式会导致交互式组件的事件无法正常绑定——静态渲染的布局无法承载动态事件处理逻辑。

具体修复步骤 #

• 为整个布局启用交互模式：在布局文件顶部添加@rendermode InteractiveAuto，确保布局及内部组件都处于交互式渲染环境中
• 简化状态更新逻辑：移除手动调用的StateHasChanged()，因为@bind-IsDarkMode会自动触发状态更新
• 调整错误UI位置：将错误提示DOM元素移入布局内部，避免结构异常

修复后的完整代码 #

@using MudBlazor
@inherits LayoutComponentBase
@rendermode InteractiveAuto

<MudThemeProvider @bind-IsDarkMode="@(_isDarkMode)" Theme="@(_theme)"/>
<MudPopoverProvider />
<MudDialogProvider />
<MudSnackbarProvider />

<FluentLayout>
    <FluentHeader>
           CVMain
        <FluentSpacer />
        <MudToggleIconButton Toggled="_isDarkMode"
                             ToggledChanged="ModeChanged"
                             Icon="@MudBlazor.Icons.Material.Filled.LightMode"
                             Color="@MudBlazor.Color.Info"
                             ToggledIcon="@MudBlazor.Icons.Material.Filled.DarkMode"
                             ToggledColor="@MudBlazor.Color.Dark" />
    </FluentHeader>
    <FluentStack Class="main" Orientation="Microsoft.FluentUI.AspNetCore.Components.Orientation.Horizontal" Width="100%">
        <FluentBodyContent Class="body-content">
            <div class="content">
                @Body
            </div>
        </FluentBodyContent>
    </FluentStack>
    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
</FluentLayout>

@code {
    private bool _isDarkMode = true;
    private MudTheme _theme = new();

    private void ModeChanged(bool darkMode)
    {
        _isDarkMode = darkMode;
    }
}

补充说明 #

• 无需给每个MudBlazor Provider单独设置@rendermode，布局启用交互模式后，内部组件会自动继承该模式
• 该修复适配Blazor Server和Blazor WebAssembly两种项目类型，确保主题切换逻辑在布局中稳定运行

内容的提问来源于stack exchange，提问作者Khandakar Rashed Hassan