非Material UI组件暗黑/亮色主题切换故障排查

你的核心问题是：只有通过MUI的makeStyles/styled创建的组件能感知主题变化，而自定义的普通div/元素没有和MUI的主题状态关联起来。你现在只给根div设置了主题背景色，但其他自定义组件里的元素根本不知道当前是暗黑还是亮色模式，自然没法切换样式。

下面给你几个实用的解决思路，按贴合MUI生态的优先级排序：

方法1：在自定义组件中使用useTheme钩子直接获取主题 #

这是最贴合MUI设计的方式，让自定义组件直接读取MUI主题的状态，动态应用样式。

比如在你的Header.js这类自定义组件里：

import React from "react";
import { useTheme } from "@material-ui/core/styles";

function Header() {
  const theme = useTheme();
  // 直接用主题里的颜色变量
  const headerStyle = {
    backgroundColor: theme.palette.background.paper,
    color: theme.palette.text.primary,
    padding: '1rem'
  };

  return <div style={headerStyle}>这是Header</div>;
}
export default Header;

如果习惯用CSS类而不是内联样式，也可以在自定义组件里用makeStyles：

import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  header: {
    backgroundColor: theme.palette.background.paper,
    color: theme.palette.text.primary,
    padding: '1rem'
  }
}));

function Header() {
  const classes = useStyles();
  return <div className={classes.header}>这是Header</div>;
}

方法2：把MUI主题变量注入全局CSS（适合大量自定义元素） #

如果你的应用里有很多零散的自定义div，一个个加useTheme太麻烦，可以把MUI的主题颜色转换成全局CSS变量，在普通CSS里直接引用。

修改你的App.js，在根元素上挂载CSS变量：

function App() {
  // ... 你的现有代码 ...
  return (
    <MuiThemeProvider theme={theme}>
      <MainContextProvider>
        {/* 用style把主题变量注入根元素 */}
        <div 
          className={classes.root}
          style={{
            '--bg-default': theme.palette.background.default,
            '--bg-paper': theme.palette.background.paper,
            '--text-primary': theme.palette.text.primary,
            '--text-secondary': theme.palette.text.secondary,
          }}
        >
          <Header />
          <TopBar />
          <Sequence />
          <SecondaryWindow />
        </div>
      </MainContextProvider>
    </MuiThemeProvider>
  );
}

然后在App.css里直接用这些变量：

/* 比如给所有自定义div设置背景色 */
.custom-div {
  background-color: var(--bg-default);
  color: var(--text-primary);
}

/* 或者给Header的类设置 */
.header {
  background-color: var(--bg-paper);
  color: var(--text-primary);
}

方法3：通过Context传递暗黑状态，切换CSS类 #

如果更习惯用传统的CSS类切换模式，可以把darkState放到你已经有的MainContext里，让自定义组件根据状态切换类名。

首先修改mainContext.js，把darkState和setDarkState加入Context：

import { createContext, useState } from "react";

export const MainContext = createContext();

export function MainContextProvider({ children }) {
  const [darkState, setDarkState] = useState(true);
  // 切换主题的方法也可以放在这里
  const toggleTheme = () => setDarkState(prev => !prev);

  return (
    <MainContext.Provider value={{ darkState, toggleTheme }}>
      {children}
    </MainContext.Provider>
  );
}

然后在自定义组件里读取这个状态：

import { useContext } from "react";
import { MainContext } from "../contexts/mainContext";

function Header() {
  const { darkState } = useContext(MainContext);
  return <div className={`header ${darkState ? 'dark-mode' : ''}`}>这是Header</div>;
}

最后在App.css里写对应的样式：

.header {
  padding: 1rem;
  transition: all 0.3s;
}

.header.dark-mode {
  background-color: #121212;
  color: #ffffff;
}

.header:not(.dark-mode) {
  background-color: #ffffff;
  color: #000000;
}

额外小提示 #

你当前的useStyles定义在App组件内部，虽然能运行，但MUI官方建议把makeStyles定义在组件外部，避免每次组件渲染都重新创建样式函数，稍微优化一下：

// 把useStyles移到App组件外面
const useStyles = makeStyles((theme) => ({
  root: {
    paddingLeft: 80,
    height: "100%",
    backgroundColor: theme.palette.background.default,
  },
}));

function App() {
  // ... 你的其他代码 ...
  const classes = useStyles();
  // ...
}

内容的提问来源于stack exchange，提问作者Sami Al-Subhi