为什么这个简单示例代码未能将MUI主题切换为dark暗模式？

• MUI的ThemeProvider仅负责向下传递主题配置上下文，不会自动修改页面根节点的默认样式
• 未引入CssBaseline组件：该组件的作用是重置浏览器默认样式，同时会根据当前主题的调色板模式自动为<html>、<body>标签设置匹配模式的背景色、默认文字色，是暗模式全局生效的必备依赖
• 裸写的Hello World文本没有使用MUI封装的基础组件，无法自动继承主题中的文字色配置

调整后的完整可运行代码如下：

import React from 'react';
import { ThemeProvider, createTheme } from '@mui/material/styles';
// 引入必备的CssBaseline和MUI基础文本组件
import CssBaseline from '@mui/material/CssBaseline';
import Typography from '@mui/material/Typography';

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

  return (
    <ThemeProvider theme={darkTheme}>
      {/* 必须放在ThemeProvider内部才能读取当前主题配置生效 */}
      <CssBaseline />
      <Typography variant="h1">
        Hello World
      </Typography>
    </ThemeProvider>
  );
}

export default App;

如果不需要全局重置样式，也可以在ThemeProvider下嵌套MUI的Box组件，手动设置宽高占满视口，同样会自动继承当前主题的背景色和文字色配置。

内容的提问来源于stack exchange，提问作者Mike Sperry