Mantine Menu.Dropdown无法正常工作问题求助

问题描述 #

学习Mantine Menu组件时，教程显示无需将React应用包裹在MantineProvider内，Menu.Dropdown即可正常运行。但实际操作时：

1. 首先收到报错，要求必须用MantineProvider包裹应用；
2. 完成包裹后，Menu.Dropdown仍无法正常触发；
3. 直接使用Mantine官网的Menu模板代码，同样无法正常工作。

我的代码 #

import React from 'react'
import {Menu, Avatar} from "@mantine/core"
const ProfileMenu = ({logout, user}) => {
  return (
    <>
    <Menu>
        <Menu.Target>
            <Avatar src={user?.picture} alt='image' radius="xl"/>
        </Menu.Target>
        <Menu.Dropdown>
            <Menu.Item>Favourite</Menu.Item>
            <Menu.Item>Logout</Menu.Item>
        </Menu.Dropdown>
    </Menu>
    </>
  )
}

export default ProfileMenu

Mantine官网模板代码 #

import { Menu, Button, Text, rem } from '@mantine/core';
import {
  IconSettings,
  IconSearch,
  IconPhoto,
  IconMessageCircle,
  IconTrash,
  IconArrowsLeftRight,
} from '@tabler/icons-react';

function ProfileMenu() {
  return (
    <Menu shadow="md" width={200}>
      <Menu.Target>
        <Button>Toggle menu</Button>
      </Menu.Target>

      <Menu.Dropdown>
        <Menu.Label>Application</Menu.Label>
        <Menu.Item leftSection={<IconSettings style={{ width: rem(14), height: rem(14) }} />}>
          Settings
        </Menu.Item>
        <Menu.Item leftSection={<IconMessageCircle style={{ width: rem(14), height: rem(14) }} />}>
          Messages
        </Menu.Item>
        <Menu.Item leftSection={<IconPhoto style={{ width: rem(14), height: rem(14) }} />}>
          Gallery
        </Menu.Item>
        <Menu.Item
          leftSection={<IconSearch style={{ width: rem(14), height: rem(14) }} />}
          rightSection={
            <Text size="xs" c="dimmed">
              ⌘K
            </Text>
          }
        >
          Search
        </Menu.Item>

        <Menu.Divider />

        <Menu.Label>Danger zone</Menu.Label>
        <Menu.Item
          leftSection={<IconArrowsLeftRight style={{ width: rem(14), height: rem(14) }} />}
        >
          Transfer my data
        </Menu.Item>
        <Menu.Item
          color="red"
          leftSection={<IconTrash style={{ width: rem(14), height: rem(14) }} />}
        >
          Delete my account
        </Menu.Item>
      </Menu.Dropdown>
    </Menu>
  );
}
export default ProfileMenu

问题原因 #

1. 版本差异：Mantine v6及以后的版本强制要求所有组件必须在MantineProvider上下文下运行，而你观看的教程可能使用的是v5或更早版本，这类旧版本允许部分组件脱离MantineProvider运行。
2. 全局样式缺失：Mantine组件依赖全局样式文件，若未引入，组件会出现渲染异常、交互失效的情况。
3. 依赖不兼容：@tabler/icons-react版本与Mantine版本不匹配，导致图标组件无法正常加载，进而影响Menu组件的交互逻辑。

解决办法 #

1. 正确配置MantineProvider并引入全局样式 #

在项目根组件（如App.js/main.jsx）中添加以下配置：

import React from 'react';
import { MantineProvider } from '@mantine/core';
import '@mantine/core/styles.css'; // 必须引入全局样式
import ProfileMenu from './ProfileMenu'; // 你的Menu组件路径

function App() {
  return (
    <MantineProvider>
      <ProfileMenu />
    </MantineProvider>
  );
}

export default App;

2. 统一依赖版本 #

执行命令安装匹配版本的依赖，避免版本冲突：

npm install @mantine/core@latest @mantine/hooks@latest @tabler/icons-react@latest

3. 排查控制台报错 #

打开浏览器开发者工具的控制台，查看具体错误信息：

• 若提示图标找不到，检查@tabler/icons-react是否安装成功；
• 若提示样式加载失败，确认@mantine/core/styles.css路径是否正确；
• 若提示上下文缺失，确保所有Mantine组件都被MantineProvider包裹。

4. 验证组件结构 #

确保Menu组件的嵌套结构正确：

• Menu作为父容器，内部只能包含Menu.Target和Menu.Dropdown两个直接子元素；
• Menu.Target内只能放置一个可点击的元素（如按钮、头像）。

内容的提问来源于stack exchange，提问作者dev.muhammad