使用react-pro-sidebar时内容区域span位置异常问题咨询

问题根因 #

你遇到的布局错位问题核心原因是react-pro-sidebar组件默认启用了fixed定位，该定位会让元素脱离正常文档流，不会占据父容器的布局空间，因此同层级的span元素会从页面最左侧开始渲染，和侧边栏出现重叠。

官方示例无该问题的原因 #

官方示例的内容区域做了适配处理，会根据侧边栏的展开/折叠状态动态设置内容区域的左侧外边距，刚好避开侧边栏的占位空间，因此不会出现重叠问题。

解决方案 #

方案1：适配fixed定位模式（推荐）

保留侧边栏滚动时固定在左侧的特性，给所有页面内容套一层外层容器，根据侧边栏的折叠状态动态设置容器的margin-left值即可，默认展开状态侧边栏宽度为270px，折叠状态宽度为80px：

// 将侧边栏折叠状态提升到父组件统一管理
import { useState } from 'react';
import NavBar from './Navbar';

export default function App() {
  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
  return (
    <div className="App">
      <NavBar 
        collapsed={isSidebarCollapsed} 
        onCollapse={setIsSidebarCollapsed}
      />
      <div style={{
        marginLeft: isSidebarCollapsed ? '80px' : '270px',
        padding: '16px'
      }}>
        <span>Why is this span here?</span>
        {/* 其余页面内容全部放在该容器内 */}
      </div>
    </div>
  );
}

方案2：改为普通流flex布局

如果不需要侧边栏滚动固定的特性，可以关闭侧边栏的fixed定位，和内容区域用flex布局并排排列：
首先调整NavBar组件内的ProSidebar配置，关闭fixed定位：

// NavBar组件内的ProSidebar标签修改
<ProSidebar fixed={false}>
  {/* 原有侧边栏内容不变 */}
</ProSidebar>

再修改App组件为flex布局：

export default function App() {
  return (
    <div className="App" style={{ display: 'flex' }}>
      <NavBar />
      <div style={{ padding: '16px' }}>
        <span>Why is this span here?</span>
      </div>
    </div>
  );
}

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