Why Is Themeprovider (Material UI) Not Working for Me Here

Why is ThemeProvider (Material UI) not working for me here?

Checking the documents of material-ui it turns out you have imported some of the things from library in a wrong way. Like the docs state -

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

Which can basically be

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

Same goes for ThemeProvider

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

ThemeProvider not applying

You have to add CssBaseline, some styles won't work without it:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {BrowserRouter} from 'react-router-dom';
import { ThemeProvider } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import theme from './theme.js'

ReactDOM.render(
  <React.StrictMode>
      <BrowserRouter> 
        <ThemeProvider theme={theme}> 
          <CssBaseline />
          <App />
        </ThemeProvider>
      </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

Material-UI ThemeProvider not passing theme to components

You've got some typo (like pallete instead of palette, redundant overrides prop etc).

Here a working example.

MUI custom theme not applying

You are using different versions of material-ui library. If you use @material-ui then it means you are using v4. If you use @mui then it means you are using v5.

You should change:

import { createTheme, ThemeProvider } from "@material-ui/core";
import { orange } from "@material-ui/core/colors";

to:

import { createTheme, ThemeProvider } from "@mui/material/styles";
import { orange } from "@mui/material/colors";

and you should also change:

import Icon from "@material-ui/core/Icon";

to:

import Icon from "@mui/material/Icon";

You can take a look at this sandbox for a live working example.

You might also take a look at Migration from v4 to v5.

Material-UI for React: cannot see changes when applying ThemeProvider

Import MuiThemeProvider like,

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

And replace your code,

<ThemeProvider theme={theme}>
    <Button color="primary">BUTTON</Button>
</ThemeProvider>

with this,

<MuiThemeProvider theme={theme}>
    <Button color="primary">BUTTON</Button>
</MuiThemeProvider>

Ref

MUI ThemeProvider is not injecting theme in a compiled component

So this turned out to be the same bad behaviour that is observed in this very common issue: https://github.com/facebook/react/issues/13991. In my case, I had two instances of Material UI because of yarn link. I solved it by creating alias in my webpack:

config.resolve = {
  ...config.resolve,
  alias: {
    react: path.resolve("./node_modules/react"),
    '@material-ui': path.resolve("./node_modules/@material-ui")
  }
};

Material-UI Theme stopped working Upgrading @material-ui/core & @material-ui/styles (REACT & Next.js)

I am not sure this will help your particular issue but I can share some pits I have fallen into while working with Material UI package for almost two years that all cause the behavior you have explained.

• Make sure your project dependencies include only one version of each of @material-ui packages. styles wont apply well if there is more than one styles version present in the project.
• Make sure all @material-ui packages you use are updated to latest version. They might not behave well together, if you miss an upgrade.
• Try along with <ThemeProvider>using <MuiThemeProvider> from @material-ui/core/styles (or replace it with). I bumped into this issue some time ago while being on version 4. If I recall correctly it was because my project used both class and functional components.

---

Related Topics