MUI5报错TypeError: Cannot read properties of undefined (reading '__emotion_styles')求助

问题描述 #

从MUI官方Stepper示例复制了以下代码：

import { styled } from '@mui/material/styles';
import { StepConnector, stepConnectorClasses } from '@mui/material/StepConnector';
const QontoConnector = styled(StepConnector)(({ theme }) => ({
  [`&.${stepConnectorClasses.alternativeLabel}`]: {
    top: 10,
    left: 'calc(-50% + 16px)',
    right: 'calc(50% + 16px)',
  },

运行时触发报错：TypeError: Cannot read properties of undefined (reading '__emotion_styles')

解决方案 #

• 修复代码语法错误：你提供的代码未完成闭合，styled的回调函数和样式对象都缺少结尾的})，这是引发报错的直接原因。修正后的完整代码如下：

import { styled } from '@mui/material/styles';
import { StepConnector, stepConnectorClasses } from '@mui/material/StepConnector';
const QontoConnector = styled(StepConnector)(({ theme }) => ({
  [`&.${stepConnectorClasses.alternativeLabel}`]: {
    top: 10,
    left: 'calc(-50% + 16px)',
    right: 'calc(50% + 16px)',
  },
}));

• 校验依赖版本兼容性：确保项目中@mui/material、@emotion/react、@emotion/styled的版本保持一致，版本不匹配会导致样式渲染逻辑冲突。可通过package.json查看版本，必要时重新安装依赖。
• 确认样式方案统一：MUI v5默认使用Emotion作为样式方案，避免同时引入旧版的@mui/styles（JSS方案），两种方案混用会引发样式上下文异常。

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