ThemeProvider not providing theme to consumer in 5.2.1 +

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Consuming theme in child class of ThemeProvider produces the following error:

TypeError: theme.spacing is not a function marginTop: theme.spacing(8)

or

TypeError: Cannot read properties of undefined (reading ‘secondary’) backgroundColor: theme.palette.secondary.main

Expected behavior 🤔

In 5.2.0, ThemeProvider provides a theme that executes both of these properly.

Steps to reproduce 🕹

Steps:

1. run create-react-app
2. App.js:

import React from 'react';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { StyledEngineProvider } from '@mui/styled-engine';

import Example from './pages/Example';

const theme = createTheme();

function App() {
  return (
    <div>
      <ThemeProvider theme={theme}>
        <StyledEngineProvider injectFirst>
          <Example/>
        </StyledEngineProvider>
      </ThemeProvider>
    </div>
  );
}
export default App;

1. pages/Example.js:

import React, { useState } from 'react';

// Material UI Components
import { 
    Avatar,
    Button,
    CircularProgress,
    Container,
    TextField,
    Link,
    Grid,
    Typography } from '@mui/material';
import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
import { withStyles } from '@mui/styles';

import axios from 'axios';

const styles = (theme) => ({
	avatar: {
        backgroundColor: theme.palette.secondary.main,
		margin: theme.spacing(1)
	},
    paper: {
		marginTop: theme.spacing(8),
		display: 'flex',
		flexDirection: 'column',
		alignItems: 'center'
	}
});

const Example = (props) => {
    const { classes } = props;
    
    return (
        <Container component="main" maxWidth="xs">
            <div className={classes.paper}>
                <Avatar className={classes.avatar}>
                    <LockOutlinedIcon />
                </Avatar>
                <Typography component="h1" variant="h5">
                    Login
                </Typography>
                <form className={classes.form} noValidate>
                    <TextField
                        id="email"
                        name="email"
                        label="Email Address"
                        variant="outlined"
                        margin="normal"
                        autoFocus
                        required
                        fullWidth
                    />
                    <TextField
                        id="password"
                        name="password"
                        label="Password"
                        variant="outlined"
                        margin="normal"
                        type="password"
                        required
                        fullWidth
                    />
                </form>
            </div>
        </Container>
    );
}

export default withStyles(styles)(Example);

1. Run npm start.

Context 🔦

I am attempting to consume a theme from a parent ThemeProvider in a React functional component. This worked as of 5.2.0, but no longer works as of 5.2.1.

Your environment 🌎

Browser: Chrome System: OS: Windows 10 10.0.19042 Binaries: Node: 14.16.0 - C:\Program Files\nodejs\node.EXE Yarn: Not Found npm: 6.14.11 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: Not Found Edge: Spartan (44.19041.1266.0), Chromium (96.0.1054.34) npmPackages: @emotion/react: ^11.6.0 => 11.6.0 @emotion/styled: ^11.6.0 => 11.6.0 @mui/base: 5.0.0-alpha.56 @mui/icons-material: ^5.2.0 => 5.2.0 @mui/material: ^5.2.0 => 5.2.0 @mui/private-theming: 5.2.0 @mui/styled-engine: 5.2.0 @mui/styles: ^5.2.1 => 5.2.1 @mui/system: 5.2.0 @mui/types: 7.1.0 @mui/utils: 5.2.0 @types/react: 17.0.36 react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2

[mnajdova]

It is already included in the migration guide - https://mui.com/guides/migration-v4/#mui-styles

[mnajdova]

This is a type error, you need to use module augmentation and define the DefaultTheme, with something like this:

import { Theme } from '@mui/material/styles';

declare module '@mui/styles' {
  interface DefaultTheme extends Theme {}
}