NextJS v13.4.19项目中onMouseEnter/onMouseOver事件无法触发求助

问题场景 #

基于Next.js v13.4.19（App Router）创建TypeScript项目，使用Material-UI的Box组件添加onMouseOver/onMouseOut事件，添加'use client'消除服务器组件报错后，鼠标事件仍未触发。

解决建议 #

• 升级Material-UI版本
  旧版@material-ui/core（MUI v4）对Next.js 13 App Router支持有限，建议切换到适配React 18和App Router的MUI v5：

  yarn remove @material-ui/core
  yarn add @mui/material @emotion/react @emotion/styled
  

• 使用正确的鼠标事件属性
  你代码中注释标注的onMouseEnter/onMouseLeave和实际使用的onMouseOver/onMouseOut是两组不同的事件：

  • onMouseEnter/onMouseLeave仅在元素本身触发，不会冒泡
  • onMouseOver/onMouseOut会冒泡到子元素
    若需要元素进入/离开的触发逻辑，直接使用onMouseEnter和onMouseLeave属性。

• 确保交互区域可被识别
  默认Box为行内元素，可能导致鼠标无法正确触发事件，可通过sx样式扩大交互区域：

  'use client';
  
  import { Box } from '@mui/material';
  
  export default function Home() {
    return (
      <Box
        color="primary"
        onMouseEnter={(e) => console.log("onMouseEnter (first button)")}
        onMouseLeave={(e) => console.log("onMouseLeave (first button)")}
        sx={{ padding: '1rem', backgroundColor: '#f0f0f0', cursor: 'pointer' }}
      >
        Hello World Edit
      </Box>
    );
  }
  

• 验证客户端组件标记有效性
  确保'use client'是文件第一行（无前置代码、注释或空行），否则客户端组件标记会失效；若Box嵌套在其他组件中，需确保父组件也标记为客户端组件。

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