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?

V5 now uses 'mode' for the pallet : mode: darkMode ? 'dark' : 'light', — Jamie_D
– Jamie_D, Commented Dec 24, 2021 at 10:56
Remove the background props and just set the theme to dark ` palette: {mode: 'dark',}` This is built in ... See Dark Mode — Jamie_D
– Jamie_D, Commented Dec 24, 2021 at 11:09
@Jamie_D: I tried what you wrote. Updated and saved the codesandbox project. The site is still white. Am I missing something more? — Frantisek
– Frantisek, Commented Dec 24, 2021 at 11:14

Jamie_D · Accepted Answer · 2021-12-24 11:45:29Z

1

Add CssBaseline to the child

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

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

See CssBaseline

answered Dec 24, 2021 at 11:45

Jamie_D

1,0097 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Frantisek Over a year ago

Thanks! Too bad this information isn't given in the documentation for ThemeProvider.

Jamie_D Over a year ago

As a side note however, the theme provider should be your App.js , providing the theme to all the child components, whereby all you would need to do is call <CssBaseline /> in each child.

Belkacem Yahiaoui · Accepted Answer · 2022-04-19 08:32:07Z

1

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

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

answered Apr 19, 2022 at 8:32

Belkacem Yahiaoui

719 bronze badges

Collectives™ on Stack Overflow

Unable to set theme in latest MUI v5 with ReactJS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related