Mui Createtheme Is Not Properly Passing Theme to Mui Components

MUI createTheme is not properly passing theme to MUI components

Change this line:

import { ThemeProvider } from "@mui/styles";

To:

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

Reason: There are 2 ThemeProviders here

The one from @mui/styles: This ThemeProvider does send the Theme object down via context, it works fine, you can still access it using the useTheme hook:

const theme = useTheme();

return <Box sx={{ width: 10, height: 10, bgcolor: theme.palette.primary.main }} />

The one from @mui/material/styles: This ThemeProvider is a wrapper of the above, but it also injects the theme to the StyledEngineThemeContext.Provider, which allows you to access the theme when using MUI API (sx prop/styled()). The problem here is that the Button and Menu components uses the styled() API under-the-hood so the ThemeProvider needs to be imported from @mui/material/styles to make it work.

return <Box sx={{ width: 10, height: 10, bgcolor: 'primary.main' }} />

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.

Not able to create theme using Material UI's ThemeProvider and createTheme

For anyone that has the same issue in the future, basically what Max wrote:

Try to stop the project. Remove package-lock.json, node_modules, reinstall node_modules and start the project again.

Material UI migration to V5: MUI component received wrong theme color through SX

We didn't quite finish our discussion, but I'm just going to list the probable suspects for anybody who runs into the same issue.

Most of the time, conflicting themes like this are caused by multiple instances of <ThemeProvider /> or its styling engine, whether that's JSS, emotion or styled-components. Either you have incorrectly nested themes, or you have imported a component that ships its own Mui palette... such as components from material-ui/core used inside @mui/material components.

If you've fully removed the legacy version from your app and are totally sure you're not using any offending components, your best course of action is to start checking for the Theme props in React dev tools, starting from the mismatched component and working your way up the tree. The offender has to be there somewhere.

MUI - makeStyles - Cannot read properties of undefined

Since you're using v5, change your ThemeProvider, createTheme and makeStyles import path from:

import { ThemeProvider, createTheme, makeStyles } from "@material-ui/core/styles";

To:

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

@material-ui/core is v4 package and @mui/material is the v5 equivalent. The API from the 2 versions are not compatible. In v5, makeStyles is also moved to a legacy package called @mui/styles, if you are using MUI v5 in a new project, you should switch completely to styled/sx API as recommended by the MUI team.

Add custom theme variable in createTheme()

Yes, this works just fine. Material-UI does a deep merge of its defaults with the object you provide with some special handling for keys that get merged in a more sophisticated fashion (such as palette, typography and a few others). Any unrecognized keys will come through unchanged.

Below is a working example:

import React from "react";
import ReactDOM from "react-dom";

import {
  useTheme,
  createMuiTheme,
  MuiThemeProvider
} from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";
const theme = createMuiTheme({
  palette: {
    primary: {
      main: "#00F"
    }
  },
  typography: {
    body1: {
      fontFamily: "Comic Sans"
    }
  },
  custom: {
    myOwnComponent: {
      margin: "10px 10px",
      backgroundColor: "lightgreen"
    }
  }
});
const MyOwnComponent = () => {
  const theme = useTheme();
  return (
    <div style={theme.custom.myOwnComponent}>
      Here is my own component using a custom portion of the theme.
    </div>
  );
};
function App() {
  return (
    <MuiThemeProvider theme={theme}>
      <div className="App">
        <Button variant="contained" color="primary">
          <Typography variant="body1">
            Button using main theme color and font-family
          </Typography>
        </Button>
        <MyOwnComponent />
      </div>
    </MuiThemeProvider>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Edit custom properties in theme

Cannot use palette colors from MUI theme

It's because you import the styled function from @mui/system:

import { styled } from '@mui/system';

The styling API from '@mui/system' doesn't have a default theme, so you need to create a theme yourself and register in ThemeProvider. If you wish to use the material default theme without writing extra code, use '@mui/material/styles':

import { styled } from "@mui/material/styles";

Mui Createtheme Is Not Properly Passing Theme to Mui Components