Blazor联系人注册模态框Label不显示问题求助（附代码）

可能的原因及修复步骤 #

1. 模态框显示控制方式冲突 #

你手动设置了style="display:@modalDisplay"，但Bootstrap模态框本身依赖modal、fade、show类来控制显示/隐藏，手动覆盖display属性可能导致内部元素的样式继承异常，进而隐藏Label。

修复：
移除style="display:@modalDisplay"，仅通过@modalClass控制模态框状态。在代码逻辑中，显示模态框时将modalClass设为show d-block，隐藏时设为空：

string modalClass = "";

void Show()
{
    modalClass = "show d-block";
}

void Hide()
{
    modalClass = "";
}

2. 排查CSS样式覆盖 #

• 检查全局CSS是否存在label { display: none; }或颜色与背景色一致的设置，导致Label视觉上消失。
• 用浏览器开发者工具（F12）查看Label元素的display、color、visibility属性，确认样式是否正常。

3. 确保Model正确初始化 #

如果contacto对象在组件渲染时为null，可能引发EditForm渲染异常（极端情况下影响组件树）。在组件类中提前初始化对象：

// 组件类中初始化Model
Contacto contacto = new Contacto();

4. 避免Bootstrap JS与Blazor事件冲突 #

你同时使用了data-bs-dismiss="modal"和Blazor的@onclick=@Hide，两种逻辑可能导致DOM更新冲突，引发样式异常。仅保留Blazor点击事件控制模态框，移除data-bs-dismiss="modal"：

<button type="button" class="btn-close" aria-label="Close" @onclick=@Hide></button>
<button type="button" class="btn btn-secondary" @onclick=@Hide>Cancelar</button>

修复后的完整模态框代码示例 #

<div class="modal fade @modalClass" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="staticBackdropLabel">Crear Contacto</h1>
                <button type="button" class="btn-close" aria-label="Close" @onclick=@Hide></button>
            </div>
            <div class="modal-body">
                <EditForm Model="@contacto">
                    <div class="form-group">
                        <label class="h6 mb-2">Nombre</label>
                        <div class="input-text">
                            <InputText class="form-control" id="nombre" @bind-Value="contacto.Nombre" />
                        </div>
                    </div>
                    <br/>
                    <div class="form-group">
                        <label class="h6 mb-2" for="apellido">Apellido</label>
                        <div class="input-text">
                            <InputText class="form-control" id="apellido" @bind-Value="contacto.Apellido" />
                        </div>
                    </div>
                    <br/>
                    <div class="form-group">
                        <label class="h6 mb-2" for="mail">Email</label>
                        <div class="input-text">
                            <InputText class="form-control" id="mail" @bind-Value="contacto.Mail" />
                        </div>
                    </div>
                    <br />
                    <div class="form-group">
                        <label class="h6 mb-2" for="documento">Documento</label>
                        <div class="input-text">
                            <InputText class="form-control" id="documento" @bind-Value="contacto.Documento" />
                        </div>
                    </div>
                    <br />
                    <div class="form-group">
                        <label class="h6 mb-2" for="celular">Celular</label>
                        <div class="input-text">
                            <InputText class="form-control" id="celular" @bind-Value="contacto.Celular" />
                        </div>
                    </div>
                </EditForm>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" @onclick=@Hide>Cancelar</button>
                <button type="button" class="btn btn-primary" @onclick=@Guardar>Guardar</button>
            </div>
        </div>
    </div>
</div>

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