React项目引入@mui/material/Unstable_Grid2模块失败求助

错误根源 #

你遇到的Module not found: Error: Can't resolve '@mui/material/Unstable_Grid2'错误，核心原因是你实际安装的是MUI v6（@mui/material@6.1.0），但按照MUI v5的规则导入组件——MUI v6中Unstable_Grid2已正式转正，路径前缀Unstable_被移除。

解决方案 #

方案1：适配MUI v6的导入规则 #

直接修改导入路径，去掉Unstable_前缀：

import Grid2 from '@mui/material/Grid2';

这是最简便的修复方式，符合你当前安装的MUI版本。

方案2：回退到MUI v5（若需保留v5生态） #

如果你确实需要使用MUI v5，先卸载当前v6包，重新安装v5稳定版：

npm uninstall @mui/material @mui/icons-material @mui/styled-engine-sc
npm install @mui/material@^5.14.0 @mui/icons-material@^5.14.0 @mui/styled-engine-sc@^5.14.0

安装完成后，即可正常导入@mui/material/Unstable_Grid2。

方案3：用styled-components自定义布局组件（你的备选方案） #

如果不想依赖MUI的Grid组件，可自行实现轻量布局组件：

import styled from 'styled-components';

// 自定义网格容器
const GridContainer = styled.div`
  display: grid;
  grid-template-columns: repeat(${props => props.columns || 12}, 1fr);
  gap: ${props => props.gap || '16px'};
  padding: ${props => props.padding || 0};
`;

// 自定义网格项
const GridItem = styled.div`
  grid-column: span ${props => props.col || 1};
`;

// 使用示例
function LoginLayout() {
  return (
    <GridContainer columns={12} gap="24px" padding="20px">
      <GridItem col={6}>登录表单区域</GridItem>
      <GridItem col={6}>侧边展示区域</GridItem>
    </GridContainer>
  );
}

额外配置修复 #

你的Webpack配置存在一处小问题，需补充React编译预设，否则JSX语法可能编译失败：
修改webpack.config.js中babel-loader的options：

use: {
  loader: 'babel-loader',
  options: {
    presets: [
      ['@babel/preset-env', { targets: 'defaults' }],
      '@babel/preset-react' // 新增这一行，支持JSX编译
    ],
  },
},

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