MUI Alert Uncaught TypeError: Cannot read properties of undefined (reading 'light')-CodePudding

I have created a login form by using MUI. I am now trying to notify the user in case the login is unsuccessful by using a MUI Alert component.

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

The Code is the following:

<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>}

The error is set in this way:

 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);

do you guys have any idea why I would get 'uncaught TypeError: Cannot read properties of undefined (reading 'light')' when the user fails to login?

Thank you very much in advance!

CodePudding user response：

First of all, I don't recommend you use CssVarsProvider at this point unless you are experimenting with stuff and know what you are doing. CssVarsProvider is still experimental and unstable. Take a look at ThemeProvider instead.

As for your original question, you are supposed to create a theme and pass it to CssVarsProvider. i.e.

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

// ...

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