Unable to set theme in latest MUI v5 with ReactJS

Question

I am building a small, simple Wiki for myself; just started learning React, although I've been working with JavaScript before.

I cannot seem to set the theme. I am trying to set the background to black. I am doing this:

  const darkMode = true;

  const theme = createTheme({
    palette: {
      type: darkMode ? 'dark' : 'light',
      background: {
        default: "#000000",
        paper: "#000000"
      }
    },
  })

And then rendering with:

<ThemeProvider theme={theme}>
...
</ThemeProvider>

codesandbox project

github repo, although it's still very young.

Any idea what I am doing wrong?

Answer 1

Add CssBaseline to the child

import CssBaseline from '@mui/material/CssBaseline';

<ThemeProvider theme={theme}>
  <CssBaseline />
...
</ThemeProvider>

See CssBaseline

Answer 2

your import is wrong, you need to import ThemeProvider from /material and not material/styles, like this:

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