reactjs - 切换主题的 ReactJs 自定义钩子

Question

您好，我想就我的自定义钩子寻求帮助我无法以将主题放在单个文件中的方式构建它

我需要在我的钩子和我的组件中导入我的主题我已经尝试了一切但我无法解决它，基本上我需要将主题首选项保存在本地存储中并且默认主题是轻的

代码：

import { darkTheme, lightTheme } from './themes/index';

export default function App() {
  const [theme, setTheme] = usePersistedState('theme');
  const toggleTheme = () => {
    setTheme(theme.type === 'light' ? darkTheme : lightTheme);
  };
  return (
    <ThemeProvider theme={theme}>
      <GlobalStyle />
      <div className="App">
        <button onClick={toggleTheme}>a</button>
      </div>
    </ThemeProvider>
  );

我的钩子：

function usePersistedState(key) {
  const [state, setState] = useState(() => {
    const storageValue = JSON.parse(localStorage.getItem(key));
    console.log(storageValue);
    switch (storageValue) {
      case 'dark':
        return darkTheme;
      case 'light':
        return lightTheme;
      default:
        return lightTheme;
    }
  });
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(state.type));
  }, [key, state]);

  return [state, setState];
}

标签： reactjs