颤动。在此主页小工具上方找不到正确的Provider<ThemeChanger>

import React, { createContext, useState } from 'react';

// 创建ThemeChanger上下文
export const ThemeChangerContext = createContext();

// ThemeChanger Provider组件
export const ThemeChangerProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };

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

// 在应用程序的最顶层使用Provider
const App = () => {
  return (
    <ThemeChangerProvider>
      <MainApp />
    </ThemeChangerProvider>
  );
};

// 在需要访问主题的组件中使用Context
const SomeComponent = () => {
  const { theme, toggleTheme } = useContext(ThemeChangerContext);

  return (
    <div className={theme}>
      <button onClick={toggleTheme}>Toggle Theme</button>
      {/* 其他组件内容 */}
    </div>
  );
};