如何在Remix子组件中实现主题自动切换？

当前代码的核心问题是：MuiTheme和Account组件各自维护独立的themeAppearance状态，两者没有同步；同时MuiTheme的useEffect依赖错误，且未监听localStorage变化和系统主题的动态切换。以下是具体修复方案：

步骤1：创建主题上下文，统一管理状态 #

新建components/MuiTheme/ThemeContext.tsx，用来共享主题状态和切换逻辑：

import { createContext, useContext, useState, useEffect, ReactNode } from 'react';

type ThemeAppearance = 'system' | 'light' | 'dark';

type ThemeContextType = {
  themeAppearance: ThemeAppearance;
  setThemeAppearance: (appearance: ThemeAppearance) => void;
};

const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

export function ThemeProviderWrapper({ children }: { children: ReactNode }) {
  const [themeAppearance, setThemeAppearance] = useState<ThemeAppearance>('system');

  // 初始化读取localStorage中的主题偏好
  useEffect(() => {
    const savedTheme = localStorage.getItem('theme') as ThemeAppearance || 'system';
    setThemeAppearance(savedTheme);
  }, []);

  // 监听系统主题变化（仅当选择system模式时生效）
  useEffect(() => {
    if (themeAppearance !== 'system') return;

    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    const handleSystemChange = (e: MediaQueryListEvent) => {
      // 触发组件重新渲染，更新主题
      setThemeAppearance(prev => prev);
    };

    mediaQuery.addEventListener('change', handleSystemChange);
    return () => mediaQuery.removeEventListener('change', handleSystemChange);
  }, [themeAppearance]);

  // 监听localStorage变化，实现多标签页同步
  useEffect(() => {
    const handleStorageUpdate = (e: StorageEvent) => {
      if (e.key === 'theme') {
        const newTheme = e.newValue as ThemeAppearance || 'system';
        setThemeAppearance(newTheme);
      }
    };

    window.addEventListener('storage', handleStorageUpdate);
    return () => window.removeEventListener('storage', handleStorageUpdate);
  }, []);

  // 主题变化时自动保存到localStorage
  useEffect(() => {
    localStorage.setItem('theme', themeAppearance);
  }, [themeAppearance]);

  return (
    <ThemeContext.Provider value={{ themeAppearance, setThemeAppearance }}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useThemeContext() {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useThemeContext必须在ThemeProviderWrapper内部使用');
  }
  return context;
}

步骤2：修改MuiTheme组件，使用上下文状态 #

更新components/MuiTheme/MuiTheme.tsx，通过上下文获取状态并计算实际使用的主题：

import { createTheme, ThemeProvider, CssBaseline } from '@mui/material';
import { useThemeContext } from './ThemeContext';

export function MuiTheme({ children }: { children: React.ReactNode }) {
  const { themeAppearance } = useThemeContext();

  // 浅色主题配置
  const lightTheme = createTheme({
    palette: {
      mode: "light",
      primary: {
        main: '#40c463',
      },
    },
  });

  // 深色主题配置
  const darkTheme = createTheme({
    palette: {
      mode: "dark",
      primary: {
        main: '#3b49df',
      },
    },
  });

  // 根据当前选择的模式，返回对应的主题
  const getCurrentTheme = () => {
    if (themeAppearance === 'dark') return darkTheme;
    if (themeAppearance === 'light') return lightTheme;
    // system模式下，跟随系统主题偏好
    return window.matchMedia('(prefers-color-scheme: dark)').matches ? darkTheme : lightTheme;
  };

  const selectedTheme = getCurrentTheme();

  return (
    <ThemeProvider theme={selectedTheme}>
      <CssBaseline />
      {children}
    </ThemeProvider>
  );
}

步骤3：更新root.tsx，添加上下文提供者 #

修改root.tsx，将ThemeProviderWrapper放在最外层，确保所有组件都能访问主题上下文：

import { MuiTheme } from "./components/MuiTheme/MuiTheme";
import { ThemeProviderWrapper } from "./components/MuiTheme/ThemeContext";

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        {children}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

export default function App() {
  return (
    <ThemeProviderWrapper>
      <MuiTheme>
        <Outlet />
      </MuiTheme>
    </ThemeProviderWrapper>
  );
}

步骤4：简化Account组件，复用上下文逻辑 #

更新routes/account.tsx，移除自身的状态管理，直接使用上下文的状态和切换方法：

import { ToggleButton, ToggleButtonGroup } from "@mui/material";
import { useThemeContext } from "../components/MuiTheme/ThemeContext";

export default function Account() {
  const { themeAppearance, setThemeAppearance } = useThemeContext();

  const handleThemeAppearance = (
    event: React.MouseEvent<HTMLElement>,
    newTheme: string | null,
  ) => {
    if (newTheme !== null) {
      setThemeAppearance(newTheme as 'system' | 'light' | 'dark');
    }
  };

  return (
    <ToggleButtonGroup
      orientation="vertical"
      value={themeAppearance}
      exclusive
      onChange={handleThemeAppearance}
      aria-label="Appearance"
    >
      <ToggleButton
        value="system"
        aria-label="System mode"
      >
        System
      </ToggleButton>
      <ToggleButton
        value="light"
        aria-label="Light mode"
      >
        Light
      </ToggleButton>
      <ToggleButton
        value="dark"
        aria-label="Dark mode"
      >
        Dark
      </ToggleButton>
    </ToggleButtonGroup>
  );
}

改动说明 #

1. 用上下文统一管理主题状态，解决了组件间状态孤立的问题
2. 监听storage事件，实现多标签页之间的主题同步
3. 监听系统主题变化，在system模式下自动响应系统设置
4. 简化了Account组件的逻辑，无需自己维护状态和读写localStorage

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