安装@mui/material后引入Box组件报找不到@emotion/react错误求助

问题原因 #

Material UI 5 默认使用 Emotion 作为底层样式引擎，@mui/material 核心包不会自动安装 Emotion 相关依赖，缺失依赖时就会触发你遇到的这个模块找不到报错。

解决方案 #

方案1（推荐，适配默认配置） #

直接安装缺失的 Emotion 依赖即可，执行以下命令：

npm install @emotion/react @emotion/styled

如果你使用 yarn 作为包管理器，执行对应命令：

yarn add @emotion/react @emotion/styled

安装完成后重启本地开发服务，你的代码本身没有语法问题，即可正常运行。

方案2（仅当你要使用 styled-components 时选择） #

如果你不想使用 Emotion，更习惯用 styled-components 作为样式引擎，可以安装对应适配包：

npm install @mui/styled-engine-sc styled-components

安装后需要在你的打包工具（Webpack/Vite等）中配置别名，将@mui/styled-engine指向@mui/styled-engine-sc即可正常使用。

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