React项目中Material-UI的Hidden组件JSX报错问题求助

核心原因及解决方案 #

1. 统一React类型依赖版本 #

报错显示存在两个不同路径的ReactNode类型，说明项目中存在@types/react版本冲突，或当前版本与Material-UI v4不兼容。

• 安装适配Material-UI v4的React类型版本（v4兼容React 16/17）：

  npm install @types/react@^17.0.0 @types/react-dom@^17.0.0 --save-dev
  

• 清理依赖缓存后重新安装：

  rm -rf node_modules package-lock.json
  npm install
  

2. 确认正确的组件导入路径 #

确保从@material-ui/core根目录导入Hidden组件，避免错误的子路径导入：

import Hidden from '@material-ui/core/Hidden';

3. 调整TypeScript配置 #

修改tsconfig.json的compilerOptions，跳过第三方库的类型检查（不影响自身代码校验）：

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true
  }
}

4. 升级Material-UI v4到最新版本 #

旧版v4可能存在已知类型bug，升级到同大版本的最新版：

npm install @material-ui/core@latest --save

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