React自定义Hook切换Tailwind主题时图片无法切换问题排查

核心问题分析 #

1. 自定义Hook状态不共享：你当前的useTheme每次调用都会创建独立的theme状态，导致标题组件和切换按钮组件的theme值不同步——按钮的theme变了，但标题组件的theme还是初始值，所以图片不会切换。
2. changeTheme逻辑错误：两个独立的if会导致状态被来回切换，比如当前是light，执行第一个if设为dark后，第二个if因为theme还没更新（setTheme是异步的），会再次执行把状态切回light，最终等于没切换。

修复步骤 #

1. 改用React Context全局共享主题状态

把主题状态提升到Context中，让所有组件共享同一个theme值：

创建ThemeContext.tsx：

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

type Theme = 'light' | 'dark';

type ThemeContextType = {
  theme: Theme;
  changeTheme: () => void;
};

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

export function ThemeProvider({ children }: { children: ReactNode }) {
  const [theme, setTheme] = useState<Theme>('light');

  useEffect(() => {
    // 从本地存储读取保存的主题，刷新后保持状态
    const savedTheme = localStorage.getItem('theme') as Theme | null;
    if (savedTheme) {
      setTheme(savedTheme);
    }
    // 应用主题到DOM
    document.documentElement.classList.toggle('dark', theme === 'dark');
  }, [theme]);

  const changeTheme = () => {
    // 用函数式更新确保拿到最新状态
    setTheme(prevTheme => {
      const newTheme = prevTheme === 'light' ? 'dark' : 'light';
      localStorage.setItem('theme', newTheme);
      return newTheme;
    });
  };

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

// 封装useTheme Hook，确保只能在ThemeProvider内使用
export function useTheme() {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  return context;
}

2. 在根组件包裹ThemeProvider

修改你的根组件（比如App.tsx），让所有组件都能访问主题状态：

import { ThemeProvider } from './hooks/ThemeContext';
import { Title } from './components/Title';
// 导入你的主题切换按钮组件
import { ThemeToggle } from './components/ThemeToggle';

function App() {
  return (
    <ThemeProvider>
      <Title />
      <ThemeToggle />
      {/* 其他页面组件 */}
    </ThemeProvider>
  );
}

export default App;

3. 简化Title组件代码

现在Title组件可以正常获取全局的theme值，图片会随主题切换：

import { NavLink } from 'react-router-dom';
import { useTheme } from '../../hooks/ThemeContext';

export function Title() {
  const { theme } = useTheme();

  return (
    <NavLink to="/">
      <img
        src={theme === 'dark' ? '/signature_red.png' : '/signature.png'}
        alt={theme === 'dark' ? '深色签名' : '浅色签名'}
        className="min-w-[150px] max-w-[300px] w-1/3 h-[75px]"
      />
    </NavLink>
  );
}

为什么这样能解决问题 #

• 全局状态共享：通过Context，所有组件使用的theme都是同一个值，切换主题时所有依赖theme的组件都会重新渲染。
• 修复切换逻辑：用函数式更新setTheme，确保基于最新状态计算新主题，同时避免了原来的双if逻辑错误。
• 持久化主题：新增了本地存储逻辑，刷新页面后主题不会重置，提升用户体验。

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