You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

.NET/Blazor 8无全局渲染模式下MudBlazor布局组件异常问询

MudBlazor组件在非全局RenderMode下的异常问题

问题概述

未为整个应用设置全局RenderMode时,MudBlazor的Drawer、AppBar等组件无法正常工作,具体问题如下:

  • 在MainLayout中无法切换Drawer的开合状态,将Drawer移至指定了RenderMode的组件后,留在MainLayout的MudLayout会导致布局异常:Drawer打开时内容无法正常收缩,AppBar尺寸不变并覆盖在Drawer上方。
  • 依赖MudPopoverProvider的组件(如MudMenu、MudPopover)无法在AppBar中正常工作,无论在何处注入提供者均无效。

已尝试多种组件组合仍未解决,怀疑是组件Bug,求可行的实现示例。

补充说明

已将菜单及相关提供者移至客户端项目并强制使用WebAssembly模式,解决了菜单/提供者问题,但MudLayout与AppBar/Drawer不在同一组件时的布局异常仍存在。若在MainNav.razor中用MudLayout包裹元素,Drawer/AppBar功能正常,但整体布局会被破坏。

简化代码片段

MainLayout.razor

<MudThemingProvider Theme="_myTheme" />

<MudLayout>
    <MainNav @rendermode="InteractiveWebAssembly" />
    <MudMainContent>
        <Breadcrumb @rendermode="InteractiveWebAssembly" />
        @Body
    </MudMainContent>
</MudLayout>

MainNav.razor

<MudAppBar Elevation="1" Dense="true">
<MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@DrawerToggle" />
<MudElement>
    <MudText Typo="Typo.h5" Class="app-title">@Title</MudText>
</MudElement>
</MudAppBar>
<MudDrawer @bind-Open="@_drawerOpen" ClipMode="DrawerClipMode.Never" Breakpoint="Breakpoint.Md" PreserveOpenState="true" Elevation="1" Variant="@DrawerVariant.Mini">
    <MudNavMenu>
        <MudNavLink Href="/" Match="NavLinkMatch.All" Icon="@Icons.Material.Outlined.Dashboard">Dashboard</MudNavLink>
    </MudNavMenu>
</MudDrawer>

内容的提问来源于stack exchange,提问作者Chris Searles

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.23 14:55:06