Mantine Menu Item点击区域异常问题求助

我们使用Mantine的Menu组件实现顶部导航菜单，整体功能正常，但存在以下问题：

• 菜单项仅文本区域可响应点击事件
• 点击菜单项空白区域时，菜单会直接关闭
• 元素检查显示超链接(<a>)仅作用于文本部分，外层按钮元素无点击事件，且<a>层级低于按钮

组件代码 #

return (
    <>
        <Menu trigger="hover" className={`${classes.menuItem} ${classes.navmenu}`} position='bottom' offset='8' withArrow> 
            {hasDropdown && (
                <Menu.Dropdown key={'Dd_' + level}>
                    {dropdownItems.map(({ title, href, dropdownItems, index, isOffice }) => (
                        <React.Fragment key={index}>
                            {Boolean(dropdownItems) && (
                                <NavSubItem
                                    key={'NV+' + level + '_' + index}
                                    title={title}
                                />
                            )}
                            {!Boolean(dropdownItems) && !Boolean(isOffice) && (
                                <Menu.Item
                                    key={level + '_' + index}
                                    onClick={()=>myFunction()}
                                    className={classes.menuItem} // Apply custom CSS class to MenuItem
                                >
                                    {title}
                                </Menu.Item>
                            )}
                        </React.Fragment>
                    ))}
                </Menu.Dropdown>
            )}
        </Menu>
    </>
);

调用方式 #

<div className="col-md-auto ml-md-auto order-1 order-md-3" style={{alignContent:'center'}}>
    <Nav>
        {navDisplay.map(({ title, dropdownItems, index }) => (
            <NavItem
                key={title + index}
                title={title}
                hasDropdown={Boolean(dropdownItems)}
                dropdownItems={dropdownItems}
                setCounty={setCounty}
                county={county}
                level={0}
            />
        ))}
    </Nav>
</div>

相关截图说明 #

• 数组内容截图：展示导航菜单的数据源结构
• 菜单显示截图：展示顶部导航及下拉菜单的外观
• 元素检查截图：显示菜单项DOM结构，可见<a>标签仅包裹文本，外层按钮区域无点击事件绑定

解决方案 #

方案1：让链接占满整个Menu.Item容器 #

通过CSS让内部<a>标签占满Menu.Item的全部空间，同时阻止Menu.Item的默认关闭行为：

{!Boolean(dropdownItems) && !Boolean(isOffice) && (
    <Menu.Item
        key={level + '_' + index}
        onClick={(e) => {
            e.preventDefault(); // 阻止菜单默认关闭逻辑
            myFunction();
        }}
        className={classes.menuItem}
    >
        <a 
            href={href} 
            style={{ display: 'block', width: '100%', height: '100%', padding: 'var(--mantine-spacing-xs) var(--mantine-spacing-md)' }}
        >
            {title}
        </a>
    </Menu.Item>
)}

同时确保自定义CSS中menuItem没有额外限制：

.menuItem {
    padding: 0;
}

方案2：直接在Menu.Item上处理点击逻辑 #

移除内部<a>标签，将跳转/业务逻辑直接绑定到Menu.Item的onClick，确保整个菜单项区域可点击：

{!Boolean(dropdownItems) && !Boolean(isOffice) && (
    <Menu.Item
        key={level + '_' + index}
        onClick={() => {
            myFunction();
            // 如需跳转页面
            window.location.href = href;
        }}
        className={classes.menuItem}
        style={{ cursor: 'pointer' }}
    >
        {title}
    </Menu.Item>
)}

方案3：使用Mantine内置Link组件结合Menu.Item #

利用Mantine的Link组件替代原生<a>，确保链接占满整个菜单项容器：

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

// ...

{!Boolean(dropdownItems) && !Boolean(isOffice) && (
    <Menu.Item
        key={level + '_' + index}
        className={classes.menuItem}
    >
        <Link 
            href={href} 
            style={{ display: 'block', width: '100%', height: '100%' }}
        >
            {title}
        </Link>
    </Menu.Item>
)}

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