MudBlazor自定义组件不显示求助：整合MudNavLink与MudCheckBox

针对你的自定义组件无法正常显示的问题，从代码中可以定位到几个关键问题，逐一修复即可解决：

1. 双向绑定缺失回调函数 #

Blazor的@bind-*语法要求组件提供对应的*Changed回调事件，你的组件仅定义了IsChecked参数，没有配套的IsCheckedChanged，导致双向绑定失效，甚至可能引发组件渲染异常。

2. 组件结构错误 #

你把MudCheckBox嵌套在了MudNavLink内部，而MudNavLink本质是<a>标签，嵌套表单控件会导致交互异常，同时布局上也会挤压checkbox，导致显示异常。应该将两者放在同一个flex容器下，保持同级结构。

3. Icon参数类型不匹配 #

MudNavLink的Icon属性接收的是IconType枚举类型，但你的组件定义的Icon参数是string类型，传递Icons.Material.Filled.Dashboard（枚举值）时会出现类型不匹配，导致图标无法渲染，甚至组件报错。

修复后的自定义组件代码 #

<div class="d-flex align-items-center custom-nav-link">
    <MudNavLink Href="@Href" Class="@Class" Icon="@Icon">
        @LinkText
    </MudNavLink>
    <MudCheckBox 
        @bind-Checked="@IsChecked" 
        Color="Color.Primary" 
        CheckedIcon="@Icons.Material.Filled.Star" 
        UncheckedIcon="@Icons.Material.Filled.StarOutline" 
        Size="Size.Small" />
</div>

@code {
    [Parameter] public string Href { get; set; }
    [Parameter] public string LinkText { get; set; }
    [Parameter] public bool IsChecked { get; set; }
    // 添加双向绑定所需的回调
    [Parameter] public EventCallback<bool> IsCheckedChanged { get; set; }
    [Parameter] public string Class { get; set; }
    // 修正Icon参数类型为IconType
    [Parameter] public IconType Icon { get; set; }
}

额外排查点 #

• 确认命名空间引用：在ImplementedPage.razor顶部添加组件所在命名空间的引用，比如@using YourProjectName.Components（替换为实际命名空间）。
• 检查浏览器控制台：按F12打开控制台，查看是否有Blazor渲染错误或JS报错，比如组件找不到、参数类型错误等。
• 验证样式：用浏览器元素检查器查看组件元素是否存在，是否被默认样式隐藏或挤压。

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