ThemeProvider Not Working on 5.0.0-alpha.35

While moving my makeStyles imports from ‘@material-ui/core/styles’ to ‘@material-ui/styles’, I ran into an issue with ThemeProvider. When my project loads, I get an error stating:

index.js:1 Material-UI: The styles argument provided is invalid. You are providing a function without a theme in the context. One of the parent elements needs to use a ThemeProvider.

However, the theme should be in the context, as StyledEngineProvider and ThemeProvider are the top components in my App.js file.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

The theme passed to makeStyles is empty.

Expected Behavior 🤔

The theme passed to makeStyles should be populated with the expected data, such as palette.

Steps to Reproduce 🕹

Demo found at this CodeSandbox link

Steps

1. Install latest material-ui dependencies: “@emotion/react”: “latest”, “@emotion/styled”: “latest”, “@material-ui/core”: “next”, “@material-ui/styles”: “next”,
2. Create a theme.js file, and populate it with light and dark theme (uses createTheme from @material-ui/core/styles)
3. Import required components in App.js (or in this case, Demo.js): import { ThemeProvider } from “@material-ui/core/styles”; import { makeStyles } from “@material-ui/styles”; import StyledEngineProvider from “@material-ui/core/StyledEngineProvider”; import { useState } from “react”; import { lightTheme } from “./theme”;
4. Implement makeStyles, with at least one class using the theme prop
5. Create a theme state in the App component, and a const for useStyles
6. Wrap return of App component with: <StyledEngineProvider injectFirst> <ThemeProvider theme={theme}> </ThemeProvider> </StyledEngineProvider>

Context 🔦

I’m trying to set up light and dark theming for a website. This was working on v5 before, but for some reason I can’t figure out why it has stopped.

Your Environment 🌎

I tested this on Brave, Chrome, and Safari.

System: OS: macOS 11.4 Binaries: Node: 14.17.0 - /usr/local/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 6.14.13 - /usr/local/bin/npm Browsers: Chrome: 91.0.4472.77 Edge: Not Found Firefox: 87.0 Safari: 14.1.1

[ddyakov]

This is because of the problem issued above. The ‘theme’ argument in makeStyles is an empty object, thus trying to call .spacing, .palette, etc. would cause error because they will be undefined.

@ddyakov After upgrading the version of “@material-ui/styles”: “^4.11.4” to “^5.0.0-alpha.35” the issue is resolved.

You are right, I just upgraded and it works! Thanks!

[andrew-hwahin]

Maybe @oliviertassinari can add in a reminder in the release note so that other people won’t make the mistake that we made 😅