如何在不同DOM节点的组件间共享React Theme Context？

需求 #

希望在非嵌套的独立组件之间共享Theme Context，实现主题切换时所有组件同步更新。

现有代码 #

theme_context.jsx #

const existingTheme = localStorage.getItem('displayTheme') || 'dark'

export const UserSettings = createContext({
  userTheme: existingTheme,
  setUserTheme: () => { }
});

export const UserSettingsProvider = ({ children }) => {
  const [userTheme, setUserTheme] = useState(existingTheme);
  console.log('getDesignTokens passed', children, userTheme)
  const muiTheme = createTheme(getDesignTokens(userTheme));
  const value = { userTheme, setUserTheme };

  return (
    <UserSettings.Provider value={value}>
      <ThemeProvider theme={muiTheme}>
        <CssBaseline />
        {children}
      </ThemeProvider>
    </UserSettings.Provider>
  )
}

当前实现（存在问题） #

navbar.jsx

import { UserSettingsProvider } from '~/components/theme_context'

ReactDOM.render(
    <UserSettingsProvider>
      <ResponsiveAppBar />
    </UserSettingsProvider>,
  document.getElementById('nav-bar')
);

footer.jsx

import { UserSettingsProvider } from '~/components/theme_context'

ReactDOM.render(
    <UserSettingsProvider>
      <ResponsiveFooter />
    </UserSettingsProvider>,
  document.getElementById('footer')
);

问题表现 #

在navbar组件中触发主题切换时，footer组件的Context主题并未同步更新——尽管两者都引入了同一个UserSettings Context。

可行但不符合需求的方案 #

将两个组件统一包裹在同一个UserSettingsProvider下，此时主题切换能同步更新，但这种方式要求所有组件必须挂载到同一个DOM节点，不符合业务需求：

import { UserSettingsProvider } from '~/components/theme_context'

ReactDOM.render(
    <UserSettingsProvider>
      <ResponsiveAppBar />
      <ResponsiveFooter />
    </UserSettingsProvider>,
  document.getElementById('root')
);

疑问 #

是否存在无需统一包裹的方式，让UserSettingsProvider成为所有独立子组件的公共提供者？

解决方案 #

问题根源

你当前的写法里，navbar和footer各自实例化了一个独立的UserSettingsProvider，每个Provider都维护自己的userTheme状态，两者状态完全隔离，切换主题自然无法同步。

方案1：全局状态管理（推荐）

把主题状态抽离到全局状态容器（比如Zustand、Jotai、Redux），让所有组件共享同一个状态源。以Zustand为例：

// store/themeStore.js
import { create } from 'zustand'
import { persist } from 'zustand/middleware'

export const useThemeStore = create(
  persist(
    (set) => ({
      userTheme: localStorage.getItem('displayTheme') || 'dark',
      setUserTheme: (theme) => set({ userTheme: theme })
    }),
    {
      name: 'theme-storage' // 自动持久化到localStorage
    }
  )
)

// 修改theme_context.jsx
import { useThemeStore } from './store/themeStore'

export const UserSettingsProvider = ({ children }) => {
  const userTheme = useThemeStore(state => state.userTheme)
  const setUserTheme = useThemeStore(state => state.setUserTheme)
  const muiTheme = createTheme(getDesignTokens(userTheme));
  const value = { userTheme, setUserTheme };

  return (
    <UserSettings.Provider value={value}>
      <ThemeProvider theme={muiTheme}>
        <CssBaseline />
        {children}
      </ThemeProvider>
    </UserSettings.Provider>
  )
}

不管navbar和footer各自用多少次UserSettingsProvider，它们共享的都是同一个全局状态，主题切换时所有组件都会同步更新。

方案2：复用全局状态实例

创建一个全局状态变量，让所有UserSettingsProvider复用这个状态：

// theme_context.jsx
const existingTheme = localStorage.getItem('displayTheme') || 'dark'

// 全局状态实例
let globalThemeState;
let globalSetTheme;

export const UserSettings = createContext({
  userTheme: existingTheme,
  setUserTheme: () => { }
});

export const UserSettingsProvider = ({ children }) => {
  // 复用全局状态，不存在则初始化
  const [userTheme, setUserTheme] = globalThemeState 
    ? [globalThemeState, globalSetTheme] 
    : useState(existingTheme);
  
  // 初始化全局状态
  if (!globalThemeState) {
    globalThemeState = userTheme;
    globalSetTheme = setUserTheme;
  }

  // 监听状态变化，同步全局变量
  useEffect(() => {
    globalThemeState = userTheme;
  }, [userTheme]);

  const muiTheme = createTheme(getDesignTokens(userTheme));
  const value = { userTheme, setUserTheme };

  return (
    <UserSettings.Provider value={value}>
      <ThemeProvider theme={muiTheme}>
        <CssBaseline />
        {children}
      </ThemeProvider>
    </UserSettings.Provider>
  )
}

这种方式通过全局变量复用状态，适合客户端渲染项目，但要注意SSR场景下可能出现状态污染问题。

方案3：React 18+跨根节点共享Context

React 18允许创建共享同一个Context的多个根节点，但实现较繁琐：

// 根文件（如index.js）
import { UserSettingsProvider, UserSettings } from '~/components/theme_context'
import { createRoot, useContext } from 'react-dom/client'

// 先创建一个共享的Provider载体
const SharedContextWrapper = () => {
  const contextValue = useContext(UserSettings);
  return contextValue;
};

const tempRoot = createRoot(document.createElement('div'));
let sharedContextValue;

// 渲染临时组件获取上下文值
tempRoot.render(
  <UserSettingsProvider>
    <SharedContextWrapper ref={(val) => sharedContextValue = val} />
  </UserSettingsProvider>
);

// 渲染navbar和footer时复用上下文值
const navbarRoot = createRoot(document.getElementById('nav-bar'));
navbarRoot.render(
  <UserSettings.Provider value={sharedContextValue}>
    <ResponsiveAppBar />
  </UserSettings.Provider>
);

const footerRoot = createRoot(document.getElementById('footer'));
footerRoot.render(
  <UserSettings.Provider value={sharedContextValue}>
    <ResponsiveFooter />
  </UserSettings.Provider>
);

这种方式需要手动管理上下文值的传递，不如全局状态管理方案简洁。

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