MUI custom theme not applying

Question

I'm trying to apply a custom MUI theme using a context provider, but the theme is not being applied in child components.

Here is my palette code:

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

const theme = createTheme({
  palette: {
    primary: orange,
    secondary: {
      main: "#000000",
    },
  },
});

export default function Palette({ children }) {
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
}

And here is my custom button that uses it:

import React from "react";
import Icon from "@material-ui/core/Icon";
import Button from "@mui/material/Button";
import Palette from "../Themes/Palette";

export default function IconButton({ icon }) {
  return (
    <Palette>
      <Button
        sx={{
          width: 60,
          height: 60,
          borderRadius: "50%",
        }}
        variant="contained"
      >
        <Icon>{icon}</Icon>
      </Button>
    </Palette>
  );
}

Answer 1

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 stackblitz for a live working example.

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

Answer 2

People who have tried literally everything but their styles are still not applying please remove all mui and styling packages and reinstall them. There might be some conflicting packages which are making mui buggy. I spent 2 days stuck on applying a custom theme, then finally did this. It worked obv that's why I am writing this answer. Peace.