React暗模式切换按钮放在App正常，放在Navbar组件不生效怎么解决？

问题原因 #

你在App.js和Navbar组件中分别调用了两次useDarkMode，两个调用会生成完全独立的状态实例，互不干扰：

• Navbar内部调用useDarkMode生成的状态，只会控制Navbar里Toggle组件的图标切换
• 全局ThemeProvider绑定的是App.js中调用useDarkMode生成的状态，这个状态完全没被修改，所以全局主题不会变化

修复方法 #

第一步：修改App.js #

将theme和toggleTheme作为props传递给Navbar组件：

// App.js 中渲染Navbar的部分修改为
<Navbar theme={theme} toggleTheme={toggleTheme} />

第二步：修改Navbar组件 #

删除Navbar内部所有和useDarkMode相关的冗余逻辑，直接接收props传递的theme和toggleTheme传给Toggle即可：

import React from 'react';
import { Nav, NavLink, Bars, NavMenu, NavBtn, NavBtnLink} from '../../theme';
import Toggle from '../Toggle';
   
const Navbar = ({theme, toggleTheme}) => {
  return (
    <>
      <Nav>
        <NavLink to="/">
            <h1>Logo</h1>
        </NavLink>
        <Bars />
        <NavMenu>
            <NavLink to="/home" activeStyle>
                Home
            </NavLink>
            <NavLink to="/portfolio" activeStyle>
                Portfolio
            </NavLink>
            <NavLink to="/about" activeStyle>
                About
            </NavLink>
            <NavLink to="/contact" activeStyle>
                Contact
            </NavLink>
        </NavMenu>
        <Toggle theme={theme} toggleTheme={toggleTheme} />
      </Nav>   
      Testing Text in navbar  
    </>
  );
};

export default Navbar;

更优实现方案 #

如果后续应用组件层级变深，逐层传递主题props会非常繁琐，可以用React Context封装主题状态：

1. 新建一个ThemeContext，将theme、toggleTheme都存入Context
2. 在App根组件用Context.Provider包裹整个应用
3. 任意需要使用/修改主题的组件，直接通过useContext获取对应的状态和方法即可，无需逐层传参

另外可以在现有hook中添加系统主题适配逻辑，用户没有手动切换过主题时，自动跟随系统暗色/亮色模式设置：

// useDarkMode hook中useEffect部分修改
useEffect(() => {
  const localTheme = window.localStorage.getItem('theme');
  if (localTheme) {
    setTheme(localTheme);
  } else {
    // 适配系统主题
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
    setMode(prefersDark ? 'dark' : 'light');
  }
  setComponentMounted(true);
}, []);

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