MUI 警报未捕获类型错误：无法读取未定义的属性（读取“光”）

Question

我使用 MUI 创建了一个登录表单。 我现在尝试通过使用 MUI 警报组件来通知用户以防登录失败。

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

代码如下：

<CssVarsProvider>
  <Sheet
    variant='outlined'
    sx={{
      maxWidth: 400,
      mx: 'auto', // margin left & right
      my: 4, // margin top & bottom
      py: 3, // padding top & bottom
      px: 2, // padding left & right
      display: 'flex',
      flexDirection: 'column',
      gap: 2,
      borderRadius: 'sm',
      boxShadow: 'md',
    }}>
    {error && <Alert severity='error'>{error}</Alert>}

错误是这样设置的：

 async function handleSubmit(e) {
 e.preventDefault();
try {
  setError('');
  setLoading(true);
  await login(email, password);
  navigate('/tutorials/html');
} catch {
  setError('Failed to log in');
}
setLoading(false);

你们知道为什么当用户登录失败时我会得到“未捕获的类型错误：无法读取未定义的属性（读取“光”）吗？

非常感谢您！

Answer 1

首先，我不建议您此时使用CssVarsProvider ，除非您正在试验一些东西并且知道自己在做什么。 CssVarsProvider仍处于试验阶段且不稳定。 改为查看ThemeProvider 。

至于您最初的问题，您应该创建一个主题并将其传递给CssVarsProvider 。 IE

const theme = extendTheme({
    // customize your theme, if needed
});

// ...

<CssVarsProvider theme={theme}>
    // ...
</CssVarsProvider>