Material UI Dialog封装为上下文模态框时无法正常显示问题

核心问题点 #

• MUI Dialog 是受控组件，你当前代码未给 Dialog 传递必填的open属性，其默认值为false，因此永远不会渲染。
• Modal 组件传参逻辑错位：你调用setModal传入的内容没有被正确传递到 Dialog 内部渲染，Modal 组件接收的title、subtitle、children属性在 ModalProvider 渲染时没有传入对应值，就算 Dialog 显示也为空内容。
• 调用setModal时传入了空的 React 片段<></>，即便逻辑正常也看不到有效内容。
• 小错误：useModal钩子的报错提示写错为UserProvider，实际应该是ModalProvider，且初始创建 Context 默认值为null，判断条件不匹配，不影响运行但报错时会产生误导。

修复步骤 #

1. 给 Dialog 添加控制显隐的属性 #

修改 Modal 组件内的 Dialog 代码，新增open和onClose属性：

<Dialog
    open={!!modal} // 新增：用modal是否存在控制显隐
    onClose={unSetModal} // 新增：点击遮罩/ESC默认关闭的逻辑
    className={errorClasses.modal}
    fullWidth
    maxWidth='md'
    aria-labelledby='max-width-dialog-title'
>

2. 调整 setModal 传值与渲染逻辑 #

将setModal的传值从直接传 JSX 改为传配置对象，方便传递标题、内容等参数，调用示例：

<button className={classes.cancelButton}
        onClick={() => { 
          setModal({
            title: "弹窗标题",
            subtitle: "弹窗辅助说明",
            children: <div>这里是弹窗的自定义内容</div>
          })
        }} >
        {'Cancel'}
</button>

3. 修正 ModalProvider 渲染逻辑 #

在 ModalProvider 渲染 Modal 时，把配置参数正确传递给 Modal 组件：

<ModalContext.Provider value={{ unSetModal, setModal }} {...props} >
    {props.children}
    {modal && <Modal 
      modal={modal} 
      unSetModal={unSetModal}
      title={modal.title}
      subtitle={modal.subtitle}
    >
      {modal.children}
    </Modal>}
</ModalContext.Provider>

4. 修正 useModal 的错误提示（可选） #

if (context === null) {
    throw new Error('useModal must be used within a ModalProvider')
}

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