React主题切换器无法将主div的id切换为dark模式

问题核心在于Slider组件没有正确响应点击事件，导致App组件的theme状态从未改变，主div的id自然无法更新。以下是具体修复步骤：

1. 修复Slider组件的属性绑定 #

你的Slider组件没有接收Header传递的onChange和checked属性，也未将这些属性绑定到内部的checkbox输入框，点击滑块时根本不会触发toggleTheme函数。修改Slider组件如下：

const Slider = ({ onChange, checked }) => {
  return (
    <div>
      <label className={styles.switch}>
        <input 
          type="checkbox" 
          checked={checked} 
          onChange={onChange} 
        />
        <span className={styles.slider}></span>
      </label>
    </div>
  );
};

注意：React中需用className替代原生的class属性，避免DOM属性冲突。

2. 确认Header组件的属性传递 #

Header组件中已经正确将toggleTheme和theme状态传递给Slider，这部分代码无需修改：

<Slider 
  onChange={props.toggleTheme}
  checked={props.theme === "dark"}
/>

3. 可选优化：用ThemeContext简化props传递 #

既然已经定义了ThemeContext，可直接让Header从Context中获取主题状态和切换方法，减少props层级：

import { useContext } from 'react';
import { ThemeContext } from './your-context-path';

const Header = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);
  
  return (
    <header>
      <Navbar bg="dark" variant="dark" expand="lg" collapseOnSelect>
        <Container className="nav_container">
          <LinkContainer to="/">
            <Navbar.Brand>Verdant</Navbar.Brand>
          </LinkContainer>
          <Slider 
            onChange={toggleTheme}
            checked={theme === "dark"}
          />
        </Container>
      </Navbar>
    </header>
  );
};

此时App组件中的Header可以简化为<Header />，无需再手动传递props。

修复完成后，点击滑块会触发toggleTheme函数，App的theme状态会在light和dark之间切换，主div的id也会同步更新，背景色就能正常切换了。

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