@material-ui/core has no exported member 'MuiThemeProvider'

[mateja176]

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

MuiThemeProvider is exported by @matterial-ui/core or a related package

Current Behavior 😯

Error is thrown
@material-ui/core has no exported member 'MuiThemeProvider'

Steps to Reproduce 🕹

Link:

1. git clone https://github.com/mateja176/react-hot-starter
2. cd react-hot-starter
3. git checkout material-ui-4
4. npm install
5. import MuiThemeProvider in src/App.tsx

Context 🔦

MuiThemeProvider was present in version 3 and there is no mention of it having been moved to another place.

Searched here https://material-ui.com/guides/migration-v3/#theme and #13663

Switching palette from dark to light and vice versa does not work without it, among other things.

Your Environment 🌎

Tech	Version
Material-UI	v4.1.3
React Scripts	3.0.1
Browser	Chrome
TypeScript	3.5.1
etc.

[merceyz]

It's exported in @material-ui/core but the types are not exported.
For now you can import from @material-ui/core/styles

[mateja176]

It's exported in @material-ui/core but the types are not exported.
For now you can import from @material-ui/core/styles

It is exported indeed. When you log MuiThemeProvider to the console. the result is:

MuiThemeProvider function ThemeProvider(props) {
  var children = props.children,
      localTheme = props.theme;
  var outerTheme = Object(_useTheme__WEBPACK_IMPORTED_MODULE_6__["default"])();
   true ? warning__WEBPACK_IMPORTED_MODULE_3___default()(outerTheme !== null || typeof localTheme !== 'function', ['Material-UI: you are providing a theme function property ' + 'to the ThemeProvider component:', '<ThemeProvider theme={outerTheme => outerTheme} />', '', 'However, no outer theme is present.', 'Make sure a theme is already injected higher in the React tree ' + 'or provide a theme object.'].join('\n')) : undefined;
  var theme = react__WEBPACK_IMPORTED_MODULE_1___default.a.useMemo(function () {
    var output = outerTheme === null ? localTheme : mergeOuterLocalTheme(outerTheme, localTheme);

    if (outerTheme !== null && output) {
      output[_nested__WEBPACK_IMPORTED_MODULE_7__["default"]] = true;
    }

    return output;
  }, [localTheme, outerTheme]);
  return react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_useTheme_ThemeContext__WEBPACK_IMPORTED_MODULE_5__["default"].Provider, {
    value: theme
  }, children);
}

However the ThemeProvider exported from @material-ui/core/styles is not the same as MuiThemeProvider from @material-ui/core. For example even when ThemeProvider is present, the components do not respond to changes in the theme palette ( the components did respond when MuiThemeProvider was present ). Moreover, @material-ui/core/styles does not export a member named MuiThemeProvider.

[merceyz]

Moreover, @material-ui/core/styles does not export a member named MuiThemeProvider.

https://github.com/mui-org/material-ui/blob/6a7daaad5d7db4ebcc48eeeba927ef007c655e5f/packages/material-ui/src/styles/index.js#L5
https://github.com/mui-org/material-ui/blob/6a7daaad5d7db4ebcc48eeeba927ef007c655e5f/packages/material-ui/src/styles/index.d.ts#L11

It is exported

[mateja176]

A temporary workaround is to add the @ts-ignore decorator or to enhance the module i.e.

// @ts-ignore
import { colors, createMuiTheme, MuiThemeProvider } from '@material-ui/core';

[mateja176]

A temporary workaround is to add the @ts-ignore decorator or to enhance the module i.e.

// @ts-ignore
import { colors, createMuiTheme, MuiThemeProvider } from '@material-ui/core';

Or an even better solution as suggested by @merceyz would be to import MuiThemeProvider from @material-ui/core/styles like so:

import { MuiThemeProvider } from '@material-ui/core/styles'

[koistya]

Do we need to use both ThemeProvider and MuiThemeProvider? Without the later one overriding globals (props) doesn't work.

[SerhiiStepanenko]

Module not found: Error: Can't resolve '@material-ui/core/styles'
from where to import
MuiThemeProvider?