Mantine Modal无法显示求助：Vite+React调用仅页面变暗无弹窗

核心原因：缺少ModalProvider包裹 #

Mantine的模态框组件（包括openConfirmModal）需要在应用根组件外层包裹ModalProvider才能正常渲染，这是v6版本的强制要求。

修复步骤： #

1. 在根组件文件（通常是src/main.jsx或src/App.jsx）中导入ModalProvider：

import { ModalProvider } from '@mantine/core';

2. 用ModalProvider包裹整个应用组件：

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <ModalProvider>
      <App />
    </ModalProvider>
  </React.StrictMode>
);

额外排查点 #

• 确认全局样式导入：确保在根文件中导入了Mantine的全局样式，否则模态框样式会异常：

import '@mantine/core/styles.css';

• 检查z-index冲突：如果项目自定义样式设置了过高的z-index，可能会覆盖模态框。可通过浏览器开发者工具查看模态框元素层级，默认Mantine模态框z-index为200，若被覆盖可在ModalProvider中自定义：

<ModalProvider zIndex={300}>
  <App />
</ModalProvider>

• 确认modals实例获取方式：必须通过useModals hook获取modals对象，不能直接调用全局方法：

import { useModals } from '@mantine/core';

function YourComponent() {
  const modals = useModals();

  const openModal = () => modals.openConfirmModal({
    title: 'Please confirm your action',
    children: (
      <Text size="sm">
        This action is so important that you are required to confirm it with a modal. Please click
        one of these buttons to proceed.
      </Text>
    ),
    labels: { confirm: 'Confirm', cancel: 'Cancel' },
    onCancel: () => console.log('Cancel'),
    onConfirm: () => console.log('Confirmed'),
  });

  return <button onClick={openModal}>打开确认框</button>;
}

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