CODEWITHSUNDEEP
reactjsmaterial-ui
Lev Shapiro
Lev Shapiro

Reputation: 99

MUI - dark theme doesn't change anything

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;

Upvotes: 3

Views: 1864

Answers (1)

Evren
Evren

Reputation: 4410

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;

Upvotes: 4

Related Questions