Cannot import @material-ui/core/styles/MuiThemeProvider

Question

I am working on a React project, using Material UI React components. I want to import MuiThemeProvider in src/index.js like so import MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider"; .

But I get

Module not found: Can't resolve '@material-ui/core/styles/MuiThemeProvider'

Checking the /node_modules/@material-ui/styles there is no MuiThemeProvider. I dont understand that. Installing the project freshly on another computer, the /node_modules/@material-ui/styles contains a MuiThemeProvider. I removed the node_modules folder and reinstalled with yarn install, but that did not do anything. When I install the project freshly on another computer, it works fine.

These are the dependencies from package.json

"dependencies": {
    "@material-ui/core": "^4.5.0",
    "@material-ui/icons": "^3.0.2",
    "@turf/turf": "^5.1.6",
    "axios": "^0.18.0",
    "epsg-index": "^0.27.0",
    "immutable": "^3.8.2",
    "immutable-prop-types": "^0.0.3",
    "lodash": "^4.17.11",
    "mapbox-gl": "^1.2.0",
    "moment": "^2.22.2",
    "particles.js": "^2.0.0",
    "phoenix": "^1.4.8",
    "proj4": "^2.5.0",
    "prop-types": "^15.7.2",
    "rc-tooltip": "^3.7.3",
    "react": "^16.4.2",
    "react-dom": "^16.9.0",
    "react-loader-spinner": "^2.3.0",
    "react-redux": "^5.0.7",
    "react-router-dom": "^5.0.0",
    "react-slick": "^0.23.2",
    "react-stripe-elements": "^4.0.0",
    "react-test-renderer": "^16.8.1",
    "redux": "^4.0.0",
    "redux-actions": "^2.6.1",
    "redux-auth-wrapper": "^2.1.0",
    "redux-devtools-extension": "^2.13.5",
    "redux-immutable": "^4.0.0",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "babel-preset-env": "^1.7.0",
    "enzyme": "^3.8.0",
    "enzyme-adapter-react-16": "^1.9.1",
    "enzyme-to-json": "^3.3.5",
    "jsdom": "^13.2.0",
    "jsdom-global": "^3.0.2",
    "react-scripts": "2.1.8",
    "redux-mock-store": "^1.5.3"
  },
  "resolutions": {
    "**/**/fsevents": "^1.2.9"
  },

Why would it install differently on two machines?!

Answer 1

It is not necessary to explicitly pull in @material-ui/styles (as indicated in Davin's answer). In fact, including that package explicitly in your package.json can lead to problems due to it getting pulled into your bundle more than once.

From https://material-ui.com/blog/september-2019-update/:

Starting with v4.5.1, the documentation mentions @material-ui/core/styles as much as possible.

This change removes the need to install the @material-ui/styles package directly. It prevents the duplication of @material-ui/styles in bundles and avoids confusion.

Also see https://material-ui.com/styles/basics/#material-ui-core-styles-vs-material-ui-styles

The problem with your import is that you had:

import MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider";

instead of:

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

The first would only work if MuiThemeProvider was a separate file or directory within @material-ui/core/styles, but it is not. The second syntax is for a named export from @material-ui/core/styles which is what it is.

Answer 2

It looks as though you need to pull in another package: @material-ui/styles. Then, you can use ThemeProvider component to set up themes as described here.

import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';

const theme = createMuiTheme({
    ...
})

...
    <ThemeProvider theme={theme}>
      <MyChild />
    </ThemeProvider>
...

Answer 3

You should use the new library: @mui/material/ Yeah, v5 has been released! check: Migration from v4 to v5

As an example this is my app

import { ThemeProvider, createTheme } from '@mui/material/styles'

const theme = createTheme({
  palette: {
    primary: {
      main: '#1476A3',
    },
    secondary: {
      main: '#292977',
    },
  },
  typography: {
    fontFamily: ['Roboto', 'sans-serif'].join(','),
  },
  components: {
    MuiPaper: {
      styleOverrides: {
        rounded: {
          borderRadius: '12px',
        },
      },
    },
    MuiButton: {
      styleOverrides: {
        root: {
          borderRadius: '8px',
        },
      },
    },
  },
})

const App = ({ children }) => (
  <main>
    <ThemeProvider theme={theme}>{children}</ThemeProvider>
  </main>
)

export default App