Mantine项目中自定义菜单项悬停状态问题的分析与解决

问题背景

在使用Mantine UI库的Menu组件时，开发者发现当使用自定义组件作为菜单项时，会出现一个意外的行为：当鼠标悬停在某个菜单项上时，所有使用相同自定义组件的菜单项都会同时显示悬停状态样式。这个问题在使用button元素作为自定义组件时尤为明显，而使用a标签则不会出现此问题。

问题复现

通过创建一个简单的自定义组件示例可以清晰地复现这个问题：

function CustomMenuItem(props: React.ComponentPropsWithoutRef<"button">) {
  return (
    <button type="button" {...props}>
      自定义菜单项
    </button>
  );
}

然后在Menu组件中使用多个该自定义组件：

<Menu.Dropdown>
  <Menu.Item component={CustomMenuItem} />
  <Menu.Item component={CustomMenuItem} />
</Menu.Dropdown>

问题分析

经过深入分析，发现问题的根源在于Mantine为这些自定义菜单项生成的className。具体观察到的className结构如下：

mantine-focus-auto m_99ac2aa1 mantine-Menu-item m_87cf2631 mantine-UnstyledButton-root

其中关键点在于第二个类名m_99ac2aa1，这个类名在所有使用相同自定义组件的菜单项之间是共享的。正是由于这个共享的类名，导致了悬停状态的样式被同时应用到所有相关菜单项上。

解决方案

Mantine团队在7.13.5版本中修复了这个问题。修复的核心思路是确保每个自定义菜单项都能获得唯一的类名标识，从而避免样式状态的共享。具体实现方式可能涉及以下几个方面：

1. 为每个自定义组件实例生成唯一的类名
2. 确保悬停状态的样式只应用于当前鼠标悬停的组件
3. 保持原有功能的同时解决样式冲突问题

最佳实践

为了避免类似问题，在使用Mantine或其他UI库的自定义组件时，开发者应该：

1. 始终使用最新版本的库，以获取最新的bug修复
2. 在自定义组件中明确处理传入的props，特别是className
3. 对于复杂的自定义组件，考虑使用React.forwardRef确保ref的正确传递
4. 测试自定义组件在各种状态下的表现，包括hover、focus等交互状态

总结

这个问题的解决展示了Mantine团队对细节的关注和快速响应能力。对于开发者而言，理解UI库内部工作机制有助于更好地使用和调试自定义组件。通过这次修复，Mantine进一步提升了其Menu组件的稳定性和可用性，为开发者提供了更可靠的UI构建工具。