MUI Alert登录失败渲染时报错Cannot read properties of undefined (reading 'light')

异常由MUI跨组件库引用导致主题上下文不匹配引发：

• 你代码中使用的<CssVarsProvider>、<Sheet>，以及sx配置里的borderRadius: 'sm'、boxShadow: 'md'这类语义化token，都属于MUI Joy UI的组件体系，外层容器注入的是Joy UI格式的主题对象。
• 但你导入的Alert来自@mui/material，也就是Material UI版本的组件，渲染时需要读取Material UI主题palette下的light配置字段，Joy UI提供的主题对象里没有对应结构，读取时就会触发Cannot read properties of undefined (reading 'light')错误。

方案1（推荐）：替换为Joy UI原生Alert #

和你现有技术栈完全适配，改造成本最低，只需要修改导入语句：

// 移除原有的 @mui/material 导入，替换为Joy UI的Alert
import Alert from '@mui/joy/Alert';

Joy UI的Alert原生支持severity属性，会自动适配外层<CssVarsProvider>的主题配置，不需要修改其余渲染逻辑。

方案2：保留Material UI Alert时补充主题上下文 #

如果必须使用Material UI版本的Alert，需要单独为其包裹Material UI的主题提供者，补全缺失的主题上下文：

1. 导入Material UI主题依赖

import { ThemeProvider, createTheme } from '@mui/material/styles';
import Alert from '@mui/material/Alert';
// 初始化Material UI默认主题
const materialTheme = createTheme();

2. 包裹条件渲染的Alert组件

<CssVarsProvider>
  <Sheet
    variant='outlined'
    sx={{
      maxWidth: 400,
      mx: 'auto',
      my: 4,
      py: 3,
      px: 2,
      display: 'flex',
      flexDirection: 'column',
      gap: 2,
      borderRadius: 'sm',
      boxShadow: 'md',
    }}>
    {error && (
      <ThemeProvider theme={materialTheme}>
        <Alert severity='error'>{error}</Alert>
      </ThemeProvider>
    )}
    {/* 其余原有表单代码保持不变 */}
  </Sheet>
</CssVarsProvider>

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