Semantic-UI-React可堆叠固定顶部菜单遮挡移动端内容，求优雅解决方案

我有一个主组件，代码如下：

return (
    <>
      <NavBar />
      <Container style={{marginTop: '7em'}}>
        <List>
          {accounts.map(account => (
            <List.Item key={account.id}>
              {account.id}
            </List.Item>
          ))}
        </List>
      </Container>
    </>
  );

该组件中包含一个NavBar组件，代码如下：

import React from 'react';
import { Container, Icon, Menu } from 'semantic-ui-react';

export default function NavBar() {
    return (
        <Menu inverted fixed='top' stackable>
            <Container>
                <Menu.Item header>
                    <Icon name='chess pawn' size='large' />
                    Menu 1
                </Menu.Item>
                <Menu.Item name='Menu 2' />
                <Menu.Item name='Menu 3' />
                <Menu.Item name='Menu 4' />
                <Menu.Item name='Menu 5' />
            </Container>
        </Menu>
    )
}

桌面端显示正常，但在移动端分辨率下，菜单堆叠后部分内容会被菜单遮挡。请问是否有优雅的方法解决这个问题？

方案1：用Semantic UI响应式间距类适配不同屏幕 #

Semantic UI自带响应式margin类，可以针对不同尺寸屏幕设置对应上边距，替代固定的7em：

<Container className="mt-xl-7 mt-lg-7 mt-md-5 mt-sm-10 mt-xs-12">
  {/* 列表内容 */}
</Container>

或者用内联样式结合媒体查询：

<Container style={{
  marginTop: '7em',
  '@media (max-width: 768px)': {
    marginTop: '12em'
  }
}}>

注：Semantic UI默认断点为：xs(<320px)、sm(320px-768px)、md(768px-992px)、lg(992px-1200px)、xl(>1200px)，可根据菜单堆叠后的实际高度调整数值。

方案2：动态计算导航栏高度设置上边距 #

通过React的useRef和useEffect实时获取导航栏实际高度，给内容容器设置对应上边距，适配所有场景：

修改主组件：

import { useRef, useEffect, useState } from 'react';

// ...

const navRef = useRef(null);
const [navHeight, setNavHeight] = useState(0);

useEffect(() => {
  const updateNavHeight = () => {
    if (navRef.current) {
      setNavHeight(navRef.current.offsetHeight);
    }
  };

  updateNavHeight();
  window.addEventListener('resize', updateNavHeight);
  return () => window.removeEventListener('resize', updateNavHeight);
}, []);

return (
    <>
      <NavBar ref={navRef} />
      <Container style={{marginTop: `${navHeight + 20}px`}}> {/* +20px为额外留白，可调整 */}
        <List>
          {accounts.map(account => (
            <List.Item key={account.id}>
              {account.id}
            </List.Item>
          ))}
        </List>
      </Container>
    </>
  );

同时修改NavBar组件支持ref传递：

import React, { forwardRef } from 'react';
import { Container, Icon, Menu } from 'semantic-ui-react';

const NavBar = forwardRef((props, ref) => {
    return (
        <Menu inverted fixed='top' stackable ref={ref}>
            <Container>
                <Menu.Item header>
                    <Icon name='chess pawn' size='large' />
                    Menu 1
                </Menu.Item>
                <Menu.Item name='Menu 2' />
                <Menu.Item name='Menu 3' />
                <Menu.Item name='Menu 4' />
                <Menu.Item name='Menu 5' />
            </Container>
        </Menu>
    )
});

export default NavBar;

方案3：CSS变量+媒体查询统一维护高度 #

在全局CSS中定义导航栏高度变量，根据屏幕尺寸修改变量值，组件中直接引用：

全局CSS（如index.css）：

:root {
  --nav-height: 7em;
}

@media (max-width: 768px) {
  :root {
    --nav-height: 12em;
  }
}

主组件中使用：

<Container style={{marginTop: 'var(--nav-height)'}}>

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