求助：复选框（checkbox）框体无法渲染显示的原因排查

我正在开发一套搜索结果筛选器列表，遇到了复选框（checkbox）框体无法正常渲染的问题，将其改为单选框（radio）类型时却能正常显示。

相关代码如下：

<h3>
    Diet:
</h3>
<ul>
    {diets.map((option) => {
        return (
        <li key={option.value}>
            <label>
                <input
                    type='checkbox'
                    onChange={(e) =>
                        handleDietsSelect(e, option.value)
                    }
                    checked={sidebarFormState.diets.includes(option.value)}
                />
                <span>
                    {option.display}
                </span>
            </label>
        </li>
    );
    })}
</ul>
</div>

我尝试了form、fieldset、label、id/name等多种写法，但结果始终一致：单选框正常显示，复选框无框体。以下是几个实用的排查方向：

• 优先检查CSS样式：这是最常见的原因。打开浏览器开发者工具（F12），选中复选框元素，查看是否有CSS规则对input[type="checkbox"]设置了display: none、opacity: 0、width: 0/height: 0这类隐藏样式；部分UI框架会隐藏原生复选框，用伪元素自定义样式，可能单选框的样式未被影响。
• 排查第三方UI库冲突：如果项目使用了Ant Design、Material UI等组件库，全局样式或自定义主题可能覆盖了原生复选框的默认渲染，但单选框的样式逻辑未受波及。可以临时移除组件库的样式文件，测试复选框是否恢复显示。
• 验证浏览器兼容性：虽然概率较低，但部分旧浏览器对原生复选框的渲染有差异，可切换至Chrome、Firefox等主流浏览器测试。
• 确认代码逻辑：检查checked属性的赋值是否异常，比如sidebarFormState.diets的数据类型是否正确，但该问题一般只会导致选中状态异常，而非框体消失。

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