在React中，不建议直接使用getElementById来修改DOM。如果使用这种方法，很可能会让人感到困惑，因为现在DOM既受手动控制，又受React控制。
ThemeToggle(props.themeID)有更多可疑的地方。大小写与var themeToggle不匹配，所以它可能没有运行。在这个例子中，它是不必要的，所以应该用setValue替换它。props.themeID也很突出。传入的字符串正确吗？
当你说“就好像说本地存储键同时代表两个字符串”时，你有没有试过在两个分支中都进行日志记录？React被允许在呈现新数据之前重新呈现相同的数据，因此它可能刚刚记录了以前的值。
我将给定的代码粘贴到一个新的create-react-app中，并让它按预期工作：
App.jsx:

import React, {useEffect, useState} from 'react';
import "./App.css"

const useLocalStorage = (storageKey, fallbackState) => {
    const [value, setValue] = useState(
        JSON.parse(localStorage.getItem(storageKey)) ?? fallbackState
    );

    useEffect(() => {
        localStorage.setItem(storageKey, JSON.stringify(value));
    }, [value, storageKey]);

    return [value, setValue];
}

const App = () => {
    const [theme, setTheme] = useLocalStorage("theme-type", "theme-default");
    const otherTheme = theme === "theme-default" ? "theme-dark" : "theme-default";

    return (
        <div className={"" + theme}>
          <div className={theme + "-inner"}>
            <div className={theme + "-front"}>
              <div>{theme}</div>
            </div>
            <div className={theme + "-back"}>
              <button onClick={() => setTheme(otherTheme)}>Toggle</button>
            </div>
          </div>
        </div>
    )
}

export default App;

App.css:

.theme-default {
  padding: 10px;
  background: #f00;
}

.theme-default-inner {
  padding: 10px;
  background: #0f0;
}

.theme-default-front {
  padding: 10px;
  background: #ff0;
}

.theme-default-back {
  padding: 10px;
  background: #00f;
}

.theme-dark {
  padding: 10px;
  background: #a00;
}

.theme-dark-inner {
  padding: 10px;
  background: #0a0;
}

.theme-dark-front {
  padding: 10px;
  background: #aa0;
}

.theme-dark-back {
  padding: 10px;
  background: #00a;
}

如果有必要将数据传递给应用的其余部分，则可以使用上下文扩展此示例。可以使用一对上下文提供程序来 Package 整个应用，一个提供theme，另一个提供setTheme。可以使用useContext检索它们。更高级的用例可以通过以下方式来满足：

import React, {createContext, useContext, useEffect, useState} from 'react';
import "./App.css"

const ThemeContext = createContext("theme-default");
const SetThemeContext = createContext((_) => {});

const useLocalStorage = (storageKey, fallbackState) => {
    const [value, setValue] = useState(
        JSON.parse(localStorage.getItem(storageKey)) ?? fallbackState
    );

    useEffect(() => {
        localStorage.setItem(storageKey, JSON.stringify(value));
    }, [value, storageKey]);

    return [value, setValue];
}

const ThemeCards = (props) => {
    const setTheme = useContext(SetThemeContext);
    return (
        <div className={props.className}>
            <div className={props.className + "-inner"}>
                <div className={props.className + "-front"}>
                    <div>{props.className}</div>
                </div>
                <div className={props.className + "-back"}>
                    <button onClick={() => setTheme(props.className)}>Toggle</button>
                </div>
            </div>
        </div>
    )
}

const OtherComponent = () => {
    const theme = useContext(ThemeContext);
    return (
        <article className={"" + theme}>Current theme is {theme}</article>
    )
}

const App = () => {
    const [theme, setTheme] = useLocalStorage("theme-type", "theme-default");
    return (
        <SetThemeContext.Provider value={setTheme}>
            <ThemeContext.Provider value={theme}>
                <OtherComponent/>
                <br/>
                <ThemeCards className={"theme-default"}></ThemeCards>
                <ThemeCards className={"theme-dark"}></ThemeCards>
            </ThemeContext.Provider>
        </SetThemeContext.Provider>
    )
}

export default App;

尝试将setting方法传递给child，看起来好像child更新主题时父代没有更新。

const [theme, setTheme] = useLocalStorage("theme-type",
"theme-default");

return (
  <>
    <div className={theme} id="themeProvider">
      <HashRouter>
        <SideBar />
        <NavTitle />
          <Routes>
            ...
            <Route path={`/${appRoutes.home}`} element={<Home setTheme={setTheme} />} />
          </Routes>
       </HashRouter>
      </div>
    </>
  );
}

或使用a context