React中组件B的CSS如何读取组件A元素的动态高度实现粘性定位？

现有两个React组件：

• 组件<H>（定义在A.tsx）：头部元素，高度会随内容、窗口尺寸等动态变化
• 组件<E>（定义在B.tsx）：需要固定在<H>正下方的粘性元素，计划通过x.css设置sticky定位，原方案尝试用CSS变量var(--ElementH-height)计算top值：

.sticky-header {
  position: sticky;
  top: var(--ElementH-height);
}

核心疑问：能否在<H>的CSS中设置该变量，让它随<H>高度变化自动更新？

附相关代码片段：
A.tsx中的<H>组件：

function H() {
    return (
        <header className="header">
           {/* 内容会动态变化，导致高度改变 */}
        </header>
    );
}

B.tsx中的<E>组件：

export function E() {
  
  return (
    <FilterContext.Provider value={filters}>
      <div className="sticky-header"> {/* 需要固定在<header>正下方 */}
        <div className="sticky-header-caption">&nbsp;</div>
      </div>
      {/* 其他内容 */}
    </FilterContext.Provider>
  )
}

1. 纯CSS无法实现自动更新 #

CSS变量本身不具备监听元素高度变化的能力，直接在<H>的CSS中设置--ElementH-height只能是固定值，无法跟随<H>的动态高度变化自动更新。

2. 可行方案：结合JS监听+React状态/CSS变量 #

要实现高度的动态同步，必须通过JavaScript监听<H>的高度变化，再将值同步给<E>。以下是两种实用方案：

方案一：React Context共享高度状态

通过Context将<H>的高度状态传递给<E>，直接设置样式属性：

1. 创建共享高度的Context：

// HeaderHeightContext.tsx
import { createContext, useContext, useState, useEffect, useRef } from 'react';

const HeaderHeightContext = createContext<number>(0);

export const HeaderHeightProvider = ({ children }) => {
  const [headerHeight, setHeaderHeight] = useState(0);
  const headerRef = useRef<HTMLElement>(null);

  const updateHeight = () => {
    if (headerRef.current) {
      setHeaderHeight(headerRef.current.offsetHeight);
    }
  };

  useEffect(() => {
    updateHeight();
    // 监听窗口尺寸变化
    window.addEventListener('resize', updateHeight);
    // 监听内部内容变化（比如子元素增删、文本变化）
    const observer = new MutationObserver(updateHeight);
    if (headerRef.current) {
      observer.observe(headerRef.current, { childList: true, subtree: true });
    }

    return () => {
      window.removeEventListener('resize', updateHeight);
      observer.disconnect();
    };
  }, []);

  return (
    <HeaderHeightContext.Provider value={headerHeight}>
      <header ref={headerRef} className="header">
        {/* <H>的内容 */}
      </header>
      {children}
    </HeaderHeightContext.Provider>
  );
};

export const useHeaderHeight = () => useContext(HeaderHeightContext);

2. 在<E>组件中读取高度并设置样式：

// B.tsx
import { useHeaderHeight } from './HeaderHeightContext';

export function E() {
  const headerHeight = useHeaderHeight();
  
  return (
    <FilterContext.Provider value={filters}>
      <div 
        className="sticky-header"
        style={{ top: `${headerHeight}px` }}
      >
        <div className="sticky-header-caption">&nbsp;</div>
      </div>
      {/* 其他内容 */}
    </FilterContext.Provider>
  );
}

方案二：JS动态更新全局CSS变量

直接将<H>的高度同步到全局CSS变量，保持<E>的CSS逻辑不变：

1. 修改<H>组件，监听高度变化并更新CSS变量：

// A.tsx
import { useEffect, useRef } from 'react';

function H() {
  const headerRef = useRef<HTMLElement>(null);

  const updateHeight = () => {
    if (headerRef.current) {
      const height = headerRef.current.offsetHeight;
      document.documentElement.style.setProperty('--ElementH-height', `${height}px`);
    }
  };

  useEffect(() => {
    updateHeight();
    window.addEventListener('resize', updateHeight);
    const observer = new MutationObserver(updateHeight);
    if (headerRef.current) {
      observer.observe(headerRef.current, { childList: true, subtree: true });
    }

    return () => {
      window.removeEventListener('resize', updateHeight);
      observer.disconnect();
    };
  }, []);

  return (
    <header ref={headerRef} className="header">
      {/* 内容 */}
    </header>
  );
}

2. x.css中的样式保持原逻辑即可：

.sticky-header {
  position: sticky;
  top: var(--ElementH-height);
}

3. 关键注意事项 #

• MutationObserver用于监听<H>内部内容变化导致的高度改变，比单纯监听窗口resize覆盖场景更全面
• 如果<H>的高度变化由React状态驱动，也可以在状态更新后手动调用updateHeight，减少不必要的监听
• 确保<E>的父级元素没有设置overflow: hidden，否则sticky定位会失效

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