Theme UI中如何动态计算固定头部高度并为后续元素添加对应内边距

方案1：使用sticky定位替代fixed（推荐，零JS逻辑） #

直接将头部的定位从fixed改为sticky，配合top:0即可实现和固定定位完全一致的吸顶效果，同时sticky定位的元素会在正常文档流中保留自身高度的占位，下方内容天然不会被遮挡，不需要额外计算高度或者加内边距，Theme UI原生支持该CSS属性：

<Box 
  as="header" 
  variant="layout.header"
  sx={{
    position: 'sticky',
    top: 0,
    zIndex: 100 // 按需设置层级保证头部在最上层
  }}
>
  {
    LogoComponent && (
      <Flex variant="styles.logo">
        <LogoComponent />
      </Flex>
    )
  }
</Box>
<Box variant="styles.content"> 
  // 内容不需要额外加上内边距，不会被遮挡
</Box>

方案2：必须使用fixed定位的轻量实现 #

如果业务逻辑必须使用fixed定位，可以结合ResizeObserver和CSS变量实现，Theme UI的sx属性原生支持直接引用CSS变量，不需要复杂的DOM查询：

import { useRef, useEffect } from 'react'
import { Box, Flex } from 'theme-ui'

const Layout = ({ LogoComponent }) => {
  const headerRef = useRef(null)

  useEffect(() => {
    if (!headerRef.current) return
    // 监听头部高度变化，自动更新全局CSS变量
    const observer = new ResizeObserver(entries => {
      const height = entries[0].contentRect.height
      document.documentElement.style.setProperty('--header-height', `${height}px`)
    })
    observer.observe(headerRef.current)
    return () => observer.disconnect()
  }, [])

  return (
    <>
      <Box 
        as="header" 
        variant="layout.header"
        ref={headerRef}
        sx={{ position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100 }}
      >
        {
          LogoComponent && (
            <Flex variant="styles.logo">
              <LogoComponent />
            </Flex>
          )
        }
      </Box>
      <Box 
        variant="styles.content"
        sx={{ pt: 'var(--header-height)' }}
      > 
        // 内容区域
      </Box>
    </>
  )
}

该方案仅需要极少量的JS逻辑，可自动适配动态加载的logo组件高度，不需要手动计算修改样式。

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