MUI - 深色主题不会改变任何东西

Question

我是 MUI 的新手，但除了换成深色主题外，一切都非常容易理解。我在有深色主题示例的页面打开了 MUI 文档。我复制了第一个示例，但对我不起作用。 Why doesn't this simple code example change my MUI theme to 'dark' mode? 从这里我了解到我需要添加更多的组件，但我并没有真正理解它是什么意思。如果我不添加 DOM 树它不起作用？为什么背景没有变化？！

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;

Answer 1

你应该加上<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;

MUI - 深色主题不会改变任何东西

MUI - dark theme doesn't change anything

reactjs

material-ui