为React+TypeScript项目的react-site-nav导航栏添加Logo与按钮

核心思路 #

不要用外层Flex容器包裹SiteNav，直接利用SiteNav自身作为Flex布局容器，避免干扰内置下拉菜单的绝对定位参考系。通过内部元素的层级划分，实现「左侧Logo + 中间居中链接 + 右侧按钮」的布局。

完整实现代码 #

组件文件（TypeScript）

import React from 'react';
import { SiteNav, ContentGroup } from 'react-site-nav';
import './CustomNavbar.css';

const CustomNavbar = () => {
  return (
    <SiteNav className="custom-site-nav">
      {/* 左侧Logo */}
      <img src="/assets/logo.png" alt="品牌Logo" className="nav-logo" />

      {/* 中间导航链接组 */}
      <div className="nav-links-wrapper">
        <ContentGroup title="About" height="200">
          关于我们的内容
        </ContentGroup>
        <ContentGroup title="Contact" height="200">
          联系我们的内容
        </ContentGroup>
      </div>

      {/* 右侧操作按钮 */}
      <button className="nav-action-btn">立即登录</button>
    </SiteNav>
  );
};

export default CustomNavbar;

样式文件（CustomNavbar.css）

/* 把SiteNav设为Flex容器，控制整体布局 */
.custom-site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  height: 64px;
  border-bottom: 1px solid #eee;
}

/* Logo样式 */
.nav-logo {
  height: 48px;
  width: auto;
}

/* 中间链接组容器，保证链接居中分布 */
.nav-links-wrapper {
  display: flex;
  gap: 2.5rem;
}

/* 右侧按钮样式 */
.nav-action-btn {
  padding: 0.6rem 1.4rem;
  border: none;
  border-radius: 6px;
  background-color: #2563eb;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.nav-action-btn:hover {
  background-color: #1d4ed8;
}

/* 修正下拉菜单偏移（若出现错位时使用） */
.custom-site-nav .rsn-content-group-dropdown {
  /* 示例：如果下拉菜单偏左，可调整transform */
  /* transform: translateX(-20%); */
  /* 或直接调整top/left值 */
  /* top: calc(100% + 8px); */
}

关键说明 #

1. 避免外层容器干扰：之前用外层Flex容器加padding导致下拉错位，是因为react-site-nav的下拉菜单是基于ContentGroup元素绝对定位的，外层容器的非static定位会改变其参考系，导致偏移。直接在SiteNav上设置Flex布局和内边距，下拉菜单的定位参考系仍为ContentGroup，不会错位。
2. 布局划分：通过三个子元素（Logo、链接组容器、按钮）配合justify-content: space-between，自动实现左右分布，中间链接组自然居中。
3. 下拉错位修正：如果仍出现下拉菜单位置偏移，可通过修改内置类.rsn-content-group-dropdown调整定位参数，比如用transform做精细偏移，或调整top/left值。

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