MUI createTheme is not properly passing theme to MUI components

Question

I have created a theme in the index of my React.JS project using MUI. When I try to apply my style to my Appbar the theme does not correctly modify the menu button nor the menu itself. the button looks generic default and the menu remains white when it should match the color of the Appbar itself.

My index.tsx looks as such:

import React from "react";
import ReactDOM from "react-dom";
import AppbarTop from "./AppbarTop";
import { Router } from "react-router";
import { createBrowserHistory } from "history";
import AdapterDateFns from "@mui/lab/AdapterDateFns";
import { LocalizationProvider } from "@mui/lab";
import { createTheme } from "@mui/material";
import { ThemeProvider } from "@mui/styles";
import { StyledEngineProvider } from "@mui/material/styles";

const customHistory = createBrowserHistory();

const theme = createTheme({
  palette: {
    primary: {
      main: "#242526"
    },
    secondary: {
      main: "#d975d0"
    },
    text: {
      primary: "#E4E6EB",
      secondary: "#B0B3B8"
    },
    background: {
      default: "#242526",
      paper: "#242526"
    }
  }
});

ReactDOM.render(
  <React.StrictMode>
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <Router history={customHistory}>
        <ThemeProvider theme={theme}>
          <StyledEngineProvider injectFirst>
            <AppbarTop />
          </StyledEngineProvider>
        </ThemeProvider>
      </Router>
    </LocalizationProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

My appbar.tsx looks like this:

import React from "react";
import {
  AppBar,
  Box,
  Button,
  Container,
  Menu,
  MenuItem,
  Toolbar
} from "@mui/material";
import HomeIcon from "@mui/icons-material/Home";
import { makeStyles } from "@mui/styles";

const useStyles = makeStyles((theme?: any) => ({
  appBar: {
    background: theme.palette.primary.main,
    height: "60px",
    position: "relative"
  }
}));

const AppbarTop: React.FC<{ [key: string]: any }> = () => {
  const classes = useStyles();

  const [anchorEl, setAnchorEl] = React.useState<any>(null);
  const open = Boolean(anchorEl);
  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <>
      <AppBar position="static" className={classes.appBar}>
        <Toolbar>
          <Button
            id="basic-button"
            aria-controls="basic-menu"
            aria-haspopup="true"
            aria-expanded={open ? "true" : undefined}
            onClick={handleClick}
          >
            Dashboard
          </Button>
          <Menu
            id="basic-menu"
            anchorEl={anchorEl}
            open={open}
            onClose={handleClose}
            MenuListProps={{
              "aria-labelledby": "basic-button"
            }}
          >
            <MenuItem onClick={handleClose}>
              <HomeIcon />{" "}
            </MenuItem>
          </Menu>
          {/*test speed dial*/}

          <Container maxWidth="sm"></Container>
          <Box></Box>
        </Toolbar>
      </AppBar>
    </>
  );
};

export default AppbarTop;

Can someone please explain what I am missing?

Answer 1

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' }} />

Related answers

• Difference between @mui/material/styles and @mui/styles?
• Cannot use palette colors from MUI theme
• MUI - makeStyles - Cannot read properties of undefined
• Material UI Dark Mode