Unable to use custom palette for mui component

Question

I'm trying to get the background colour to be the midnightBlue, and i'm getting an error:

TypeError: Cannot read properties of undefined (reading '100')

After checking the syntax, I can't catch any errors. This seems to be a dependancy issue i'm thinking?

Thanks in advance

import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";
import { ThemeProvider, createTheme } from "@mui/system";

const Navbar = () => {
  const theme = createTheme({
    palette: {
      background: {
        midnightBlue: "#0A1929"
      }
    },
  });

  return (
    <ThemeProvider theme={theme}>
      <Box sx={{ flexGrow: 1, bgColor: "background.midnightBlue"}}>
        <AppBar position="static">
          <Toolbar>
            <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
              Name
            </Typography>
            <Button color="inherit">Link 1</Button>
            <Button color="inherit">Link 2</Button>
            <Button color="inherit">Link 3</Button>
            <Button color="inherit">Link 4</Button>
          </Toolbar>
        </AppBar>
      </Box>
    </ThemeProvider>
  );
};

export default Navbar;

what version of MUI are you using? – Mähnenwolf Nov 12 '21 at 13:46 — Mähnenwolf, Nov 12 '21 at 13:46

score 0 · Answer 1 · answered Nov 12 '21 at 13:57

0

So I went and checked, and your import is wrong, it should be like this

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

answered Nov 12 '21 at 13:57

Mähnenwolf

720
10
30

score 0 · Answer 2 · answered Nov 14 '21 at 15:22

You're import is incorrect. It should be:

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

Tip: Sometimes when you auto import, some components get imported from "@mui/system" which leads to such issues, most of the time named import from "@mui/material" will suffice.

Unable to use custom palette for mui component

2 Answers2