Next.js中使用Intersection Observer修改CSS变量部分失效问题排查

从CMS获取十六进制颜色值后，通过Intersection Observer跟踪section时，只有--background变量能成功更新，--foreground和--highlight变量无变化。以下是相关代码：

import React, { useEffect, useState } from 'react'
import { ReactSVG } from 'react-svg'


const Season = ({ season, divider }) => {
// Data from CMS
const { seasonVideo,
seasonTitleSvg,
seasonNumber,
hexSeasonBg,
seasonTextColor,
highlightTextColor,
seasonMessage } = season.fields

const [highlight, setHighlight] = useState(highlightTextColor);
const [foreground, setForeground] = useState(seasonTextColor);
const [background, setBackground] = useState(hexSeasonBg);


useEffect(() => {
   const options = {
      root: null, // Use the viewport as the root
      rootMargin: '0px', // No margin
      threshold: 0.4, // 40% visibility required to trigger the intersection
    };
   const observer = new IntersectionObserver(handleIntersection, options);
   observer.observe(document.querySelector(`.${seasonNumber}`));
   return () => {
     observer.disconnect();
   };
 }, [seasonNumber, foreground, background, highlight]);


// Function to handle intersection
const handleIntersection = (entries) => {
   entries.forEach((entry) => {
     if (entry.isIntersecting) {

      console.log(foreground, background, entry)

         document.documentElement.style.setProperty('--background', background);
         document.documentElement.style.setProperty('--highlight', highlight);
         document.documentElement.style.setProperty('--foreground', foreground);
     } else {
     }
   });
 };

return (
<section className={`${seasonNumber} season`}>
      <div className="seasonTitle-wrapper">
            <div className="season-title">
               <ReactSVG src={'https:' + seasonTitleSvg.fields.file.url} style={{ width: '30vw', height: 'auto' }} alt={seasonNumber} />
            </div>
            <ReactSVG src={'https:' + divider} className="divider" />
      </div>
</section>
)
}

export default Season

问题分析与修复方案 #

1. 闭包捕获旧值 + 依赖数组错误 #

handleIntersection函数未被加入useEffect的依赖数组，且依赖数组错误包含了foreground/background/highlight，导致函数始终捕获组件首次渲染时的state值，无法响应后续变化。

修复：
用useCallback包裹handleIntersection并修正依赖数组：

import React, { useEffect, useState, useCallback } from 'react'
// ... 其他导入

const Season = ({ season, divider }) => {
  // ... CMS数据解构
  const [highlight, setHighlight] = useState(highlightTextColor);
  const [foreground, setForeground] = useState(seasonTextColor);
  const [background, setBackground] = useState(hexSeasonBg);

  // 用useCallback包裹，明确依赖
  const handleIntersection = useCallback((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        document.documentElement.style.setProperty('--background', background);
        document.documentElement.style.setProperty('--highlight', highlight);
        document.documentElement.style.setProperty('--foreground', foreground);
      }
    });
  }, [background, foreground, highlight]);

  useEffect(() => {
    const options = {
      root: null,
      rootMargin: '0px',
      threshold: 0.4,
    };
    const sectionElement = document.querySelector(`.${seasonNumber}`);
    if (!sectionElement) return; // 防止找不到元素报错
    const observer = new IntersectionObserver(handleIntersection, options);
    observer.observe(sectionElement);
    return () => observer.disconnect();
  }, [seasonNumber, handleIntersection]); // 仅依赖seasonNumber和handleIntersection
  // ... 其余代码
}

2. State未同步CMS props更新 #

当前state仅在组件初始化时从props赋值，若CMS数据更新，state不会自动同步，导致颜色值始终是旧值。

修复：
添加同步props到state的useEffect：

useEffect(() => {
  setForeground(seasonTextColor);
  setHighlight(highlightTextColor);
  setBackground(hexSeasonBg);
}, [seasonTextColor, highlightTextColor, hexSeasonBg]);

3. 颜色格式不规范 #

检查CMS返回的seasonTextColor和highlightTextColor是否带有#前缀（例如#ffffff），CSS无法识别无#的十六进制颜色值。

修复：
添加颜色格式化函数统一处理：

const formatColor = (color) => {
  if (!color) return '';
  // 若颜色无#前缀则自动添加
  return color.startsWith('#') ? color : `#${color}`;
};

// 在handleIntersection中使用：
document.documentElement.style.setProperty('--foreground', formatColor(foreground));
document.documentElement.style.setProperty('--highlight', formatColor(highlight));

4. 改用Ref替代DOM查询（可选但更可靠） #

避免使用document.querySelector，用React的useRef直接绑定section元素，减少DOM查询的潜在问题：

const seasonRef = useRef(null);

// 在return中绑定ref：
<section ref={seasonRef} className={`${seasonNumber} season`}>
  {/* 其余内容 */}
</section>

// 在useEffect中使用ref：
useEffect(() => {
  const options = {
    root: null,
    rootMargin: '0px',
    threshold: 0.4,
  };
  if (!seasonRef.current) return;
  const observer = new IntersectionObserver(handleIntersection, options);
  observer.observe(seasonRef.current);
  return () => observer.disconnect();
}, [seasonNumber, handleIntersection]);

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