MUI – dark theme doesn't change anything

April 25, 2022

I am new to MUI, but all was pretty easy to understand beside changing to dark theme.
I opened documentation of MUI at page where there are examples with dark theme. I copied the first example and it didn’t work to me. Why doesn't this simple code example change my MUI theme to 'dark' mode? from here I understood that I need to add more components, but I didn’t really understand what does it mean. If I don’t add DOM tree it doesn’t work? Why the background doesn’t change?!

import React from 'react';
import { ThemeProvider, createTheme } from '@mui/material/styles';

function App() {
  const darkTheme = createTheme({
    palette: {
      mode: 'dark'
    },
  });

  return (
    <ThemeProvider theme={darkTheme}>
      Hello World
    </ThemeProvider>
  );
}

export default App;

>Solution :

You shoul add <CssBaseline />

import React from 'react';
import { ThemeProvider, createTheme } from '@mui/material/styles';

function App() {
  const darkTheme = createTheme({
    palette: {
      mode: 'dark'
    },
  });

  return (
    <ThemeProvider theme={darkTheme}>
      <CssBaseline />
      Hello World
    </ThemeProvider>
  );
}

export default App;