material-ui: Library component cannot access theme provided by ThemeProvider

I have two projects that use MUI, a NextJS app and a component library which the app imports. The app uses ThemeProvider at the top level and provides a theme which is imported from the component library. Components in the app are able to access the theme, however, components imported from the component library are not able to access the theme. Both the app and the component library were recently upgraded to MUI v5 and the problem has been present since upgrading. I am aware that this is similar to the issue noted here: https://github.com/mui-org/material-ui/issues/19309. I have tried the proposed solution and it doesn’t seem to work.

• 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 😯

When I try to run my NextJS app, while using components from the component library, I get an error indicating that theme is coming up as undefined when referenced in components in the component library.

Expected Behavior 🤔

ThemeProvider should be able to inject theme into components from the component library. This worked previously when on MUI v4

Context 🔦

We are trying to upgrade to MUI v5 in our component library and NextJS app. This works just fine in v4 but after upgrading the component library to v5 we are running into this problem.

The same issue is described here: https://github.com/mui-org/material-ui/issues/19309, after reading this, I tried adding an alias to webpack config in next.config.js like below but that didn’t seem to solve the problem.

 webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      react: path.resolve('./node_modules/react')
    };
    return config;
  },

I read the note about changing the import for ThemeProvider described here: https://next.material-ui.com/guides/migration-v4/#mui-styles but that didn’t seem to resolve the issue either.

We are using NextJS in the app and we use import withStyles from ‘@mui/styles’ to apply custom styles in the components.

Your Environment 🌎

  System:
    OS: macOS 11.6
  Binaries:
    Node: 16.3.0 - ~/.nvm/versions/node/v16.3.0/bin/node
    Yarn: 1.22.10 - ~/node_modules/.bin/yarn
    npm: 7.20.3 - ~/node_modules/.bin/npm
  Browsers:
    Chrome: 93.0.4577.82
    Edge: Not Found
    Firefox: Not Found
    Safari: 14.1.2
  npmPackages:
    @emotion/react:  11.4.1 
    @emotion/styled: ^11.3.0 => 11.3.0 
    @mui/core:  5.0.0-alpha.46 
    @mui/icons-material:  5.0.0 
    @mui/material: 5.0.0-rc.1 => 5.0.0-rc.1 
    @mui/private-theming:  5.0.0-rc.1 
    @mui/styled-engine:  5.0.0-rc.1 
    @mui/styled-engine-sc: next => 5.0.0-rc.1 
    @mui/styles: 5.0.0 => 5.0.0 
    @mui/system:  5.0.0-rc.1 
    @mui/types:  7.0.0-rc.1 
    @mui/utils:  5.0.0-rc.1 
    @types/react: latest => 17.0.21 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    styled-components: latest => 5.3.1 
    typescript: latest => 4.4.3 ```
</details>