material-ui: [ThemeProvider] not working from @mui/material/styles, but does from @mui/styles.

Hi,

I’m trying to port a moderately sized project from MaterialUI4 to MUI5. I’m following the migration instructions but have hit a bit of a wall with the following;

I am using the createStyles/makeStyles APIs from @mui/styles, however I get the following error when running unit tests or launching the project;

      MUI: 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.

My tests are all wrapped in a <ThemeProvider> instance.

My initial thoughts were I am somehow including multiple copies of React or another library which is causing this issue, however this does not appear to be the case.

By trial and error, I’ve found that changing the ThemeProvider import from import { ThemeProvider } from "@mui/material/styles"; to import { ThemeProvider } from "@mui/styles";

Allows the tests to pass, and the project to launch, but this doesn’t look right, as the migration guide states;

_https://mui.com/guides/migration-v4/#mui-styles_

If you are using the utilities from @mui/styles together with the @mui/material, you should replace the use
of ThemeProvider from @mui/styles with the one exported from @mui/material/styles. This way, the theme
provided in the context will be available in both the styling utilities exported from @mui/styles, like
makeStyles, withStyles etc. and the MUI components.

So before I start going through fixing the styles etc. Does anyone have any idea why I might be seeing this? Is this something that has been encountered before?

The only possible suspicious thing I’ve found is that running npm ls @mui/system

Results in the following;

my.project@0.1.0 C:\project_path\ClientApp
├─┬ @mui/lab@5.0.0-alpha.59
│ └── @mui/system@5.2.3
└─┬ @mui/material@5.2.3
  └── @mui/system@5.2.3

Why would there be two copies of the @mui/system package? Notably this is where ThemeProvider lives so I see this as a red flag. Shouldn’t these be deduped? The same thing happens with @mui/base.

By including @mui/system and @mui/base directly into my package.json this creates a deduping effect;

my.project@0.1.0 C:\project_path\ClientApp
├─┬ @mui/lab@5.0.0-alpha.59
│ └── @mui/system@5.2.3 deduped
├─┬ @mui/material@5.2.3
│ └── @mui/system@5.2.3 deduped
└── @mui/system@5.2.3

The issue however, persists.

Node: 16.13.0 Npm: 8.1.0 React Scripts: 4.3.0

any help greatly appreciated!

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 17 (3 by maintainers)

Most upvoted comments

Had a similar issue. It surfaced with useStyle not having my theme and was an empty object.

I solved by adding two <ThemProvider /> for a little bit.

import { ThemeProvider } from "@mui/material";
import { ThemeProvider as ThemeProviderLegacy } from "@mui/styles";

<ThemeProvider theme={theme}>
  <ThemeProviderLegacy theme={theme}>
      {children}
  </ThemeProviderLegacy>
</ThemeProvider>

However, I realize this was silly.

I opened my yarn.lock and saw I had two versions of @mui/private-theming. The fix was to make it resolve to 1 version. More specifically I also made sure all my @mui/* were de-duped. I did so by removing all @mui/* in yarn.lock and running yarn install. Nice and easy 👍🏻

+15

TheBox193 on Mar 22, 2022

The easiest way that I founded was using useTheme with themeProvider from @mui/material.

Here’s the example CodeExample This goes in my app.js ( on react-app ). This way you can call a compatible defaultTheme on your makeStyles 😄

I’m using v5.10 of mui

manuellysuzik on Sep 20, 2022

By including @mui/system and @mui/base directly into my package.json this creates a deduping effect;

You should not include them in your package.json, as they are already bundled with @mui/material. You should only need to install: @mui/material, @mui/styles, @emotion/react, @emotion/styled.

mnajdova on Dec 7, 2021