使用ThemeContext+useState实现明暗主题切换失效问题求助

问题描述 #

尝试通过ThemeContext和useState实现浅色/深色主题切换，点击切换图标后背景无变化，且toggleTheme函数内的console.log无输出。此前直接修改SCSS将背景设为红色可正常生效，说明样式本身能作用到元素，但主题切换逻辑未触发。

相关代码 #

Layout组件 #

import React, {createContext, useState} from 'react'
import { Outlet } from 'react-router-dom';
import { Sidebar } from '../Sidebar/Sidebar';
import './Layout.scss';

// 给Context设置默认值，便于排查传递是否成功
export const ThemeContext = createContext({
  theme: 'light',
  toggleTheme: () => console.log('默认toggleTheme触发')
});

export const Layout = ({children}) => {
  const [theme, setTheme] = useState ('light');
  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark': 'light');
    console.log("主题切换触发")
  }

 return (
  <ThemeContext.Provider value={{theme, toggleTheme}}>
    <div className={`App ${theme}`}>
      <Sidebar/>
      <div className='page'>
        <span className='tags top-tags'>&lt;body&gt;</span>
        <Outlet />
        <span className='tags bottom-tags'>
        &lt;body&gt;
        <br />
        <span className='bottom-tag-html'>&lt;/html&gt;</span>
        </span>
      </div>
    </div>
   </ThemeContext.Provider>
 )
}

Layout的SCSS代码 #

.App {
  .page {
      width: 100%;
      height: 100%;
      position: absolute;
  }

  .top-tags {
      bottom: auto;
      top: 35px;
  }

  .tags {
      color: rgb(0, 102, 255);
      opacity: 0.6;
      position: absolute;
      bottom: 0;
      left: 120px;
      font-size: 18px;
      font-family: 'La Belle Aurore', cursive;
  }

  .bottom-tag-html {
      margin-left: -20px;
  }

  // 修复选择器：去掉空格，匹配同时拥有App和主题类的元素
  &.light {
    background-color: rgb(255, 255, 255);
    color: black;
  }

  &.dark {
    background-color: black;
    color: white;
  }
}
 
.container {
    width: 100%;
    will-change: contents;
    height: 90%;
    min-height: 566px;
    position: absolute;
    opacity: 0;
    top: 5%;
    margin: 0 auto;
    z-index: 1;
    transform-style: preserve-3d;
    animation: fadeIn 1s forwards;
    animation-delay: 1s;
}

.contact-page,
.about-page {
    .text-zone {
        position: absolute;
        left: 10%;
        top: 50%;
        transform: translateY(-50%);
        width: 35%;
        vertical-align: middle;
        display: table-cell;
        max-height: 90%;

        h1 {
            font-size: 53px;
            font-family: 'Coolvetica';
            color: rgb(0, 102, 255);
            font-weight: 400;
            margin-top: 0;
            position: relative;
            margin-bottom: 40px;
            left: 10px;
          
            &:before {
              content: '<h1>';
              font-family: 'La Belle Aurore';
              font-size: 18px;
              position: absolute;
              margin-top: -10px;
              left: -10px;
              opacity: 0.6;
              line-height: 18px;
            }
          
            &:after {
              content: '<h1/>';
              font-family: 'La Belle Aurore';
              font-size: 18px;
              line-height: 18px;
              position: absolute;
              left: -30px;
              bottom: -20px;
              margin-left: 20px;
              opacity: 0.6;
            }
          }
          
          p {
            font-size: 13px;
            color: #000000;
            font-family: sans-serif;
            font-weight: 300;
            max-width: fit-content;
            animation: pulse 1s;
            &:nth-of-type(1) {
              animation-delay: 1.1s;
            }
            &:nth-of-type(2) {
              animation-delay: 1.2s;
            }
            &:nth-of-type(3) {
              animation-delay: 1.3s;
            }
        }
    }

    .text-animate-hover {
        &:hover {
          color: #000000;
        }
    }
}

Sidebar组件 #

import React, {useContext, useState} from 'react'
import './Sidebar.scss'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faLinkedin, faGithub} from '@fortawesome/free-brands-svg-icons'
import { faHome, faUser, faEnvelope, faSuitcase, faBars, faClose, faSun} from '@fortawesome/free-solid-svg-icons'
import { Link, NavLink } from 'react-router-dom'
import {ThemeContext} from '../Layout/Layout'

export const Sidebar = () => {
  const [isNavVisible, setIsNavVisible] = useState(false);

  const {toggleTheme} = useContext(ThemeContext);
  // 排查用：打印toggleTheme，确认是否拿到正确的函数
  console.log('当前toggleTheme:', toggleTheme);

  const toggleNav = () => {
    setIsNavVisible(!isNavVisible);
  };

 return (
  <div>
    <FontAwesomeIcon icon={faBars} color="#4d4d4e" onClick={toggleNav} className="hamburger-icon" />
    {/* 给图标添加鼠标指针样式，确认可点击 */}
    <FontAwesomeIcon icon={faSun} color='#4d4d4e' onClick={toggleTheme} className='theme-toggle-icon' style={{cursor: 'pointer'}}/>
    <div className={`nav-bar ${isNavVisible ? 'visible' : ''}`}>
          <nav className={isNavVisible ? 'show':'hide'}>
            <NavLink exact="true" activeclassname="active" to="/" >
              <FontAwesomeIcon icon={faHome} color="#4d4d4e" />
            </NavLink>
            <NavLink exact="true" activeclassname="active" className='about-link' to="/about" >
              <FontAwesomeIcon icon={faUser} color="#4d4d4e" />
            </NavLink>
            <NavLink exact="true" activeclassname="active" className='portfolio-link' to="/portfolio" >
              <FontAwesomeIcon icon={faSuitcase} color="#4d4d4e" />
            </NavLink>
            <NavLink exact="true" activeclassname="active" className='contact-link' to="/contact" >
              <FontAwesomeIcon icon={faEnvelope} color="#4d4d4e" />
            </NavLink>
          </nav>
          <ul>
            <li>
              <a href="#" target="_blank" rel="noreferrer">
                <FontAwesomeIcon icon={faLinkedin} color="#4d4d4e" className="anchor-icon"/>
              </a>
            </li>
            <li>
              <a href="#" target="_blank" rel="noreferrer">
                <FontAwesomeIcon icon={faGithub} color="#4d4d4e" className="anchor-icon"/>
              </a>
            </li>
          </ul>
    </div>
  </div>
 )
}

问题排查与修复步骤 #

1. 修复SCSS选择器
   原代码中& .light和& .dark会编译为.App .light（选中App元素内的light类元素），但实际主题类是和App类加在同一个div上，所以需要改为&.light和&.dark，编译后为.App.light，才能正确匹配目标元素。

2. 确认Context传递有效性
   给ThemeContext添加默认值，如果点击图标时控制台输出"默认toggleTheme触发"，说明Sidebar不在Provider的作用范围内，需要检查路由配置，确保所有使用Sidebar的页面都被Layout组件包裹。

3. 确保点击事件可触发
   给主题切换图标添加cursor: pointer样式，确认鼠标悬停时显示指针，避免图标被其他元素遮挡导致点击事件无法触发。同时在Sidebar中打印toggleTheme，确认拿到的是Layout中定义的函数而非默认值。

4. 检查状态更新逻辑
   若点击后console.log("主题切换触发")输出，但样式无变化，可在Layout组件中打印theme值，确认状态是否正确切换，同时检查其他组件是否依赖theme状态来更新样式。

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