React中自定义CSS Header与MUI侧边栏重叠问题解决方案咨询

方案一：提升Header层级，覆盖抽屉 #

MUI的永久抽屉（variant="permanent"）默认z-index为1200，给纯CSS实现的Header设置更高的层级，就能让它显示在抽屉上方。

修改Header的CSS：

.navbar {
  background-color: #e0edbf;
  z-index: 1300; /* 高于MUI抽屉默认的1200 */
  position: relative; /* 确保z-index属性生效 */
}

注意：如果项目中有MUI弹窗（Modal/Dialog），它们默认z-index是1300，此时可以把Header的z-index调整为1400，避免被弹窗遮挡。

方案二：抽屉展开时偏移Header的Logo #

通过共享抽屉的展开状态给Header组件，动态调整Logo位置，避免被遮挡。

步骤1：创建抽屉状态管理Context #

新建DrawerContext.tsx：

import React, { createContext, useContext, useState, ReactNode } from 'react';

interface DrawerContextType {
  isDrawerOpen: boolean;
  setIsDrawerOpen: (open: boolean) => void;
}

const DrawerContext = createContext<DrawerContextType | undefined>(undefined);

export const DrawerProvider = ({ children }: { children: ReactNode }) => {
  const [isDrawerOpen, setIsDrawerOpen] = useState(false);

  return (
    <DrawerContext.Provider value={{ isDrawerOpen, setIsDrawerOpen }}>
      {children}
    </DrawerContext.Provider>
  );
};

export const useDrawerContext = () => {
  const context = useContext(DrawerContext);
  if (!context) {
    throw new Error('useDrawerContext必须在DrawerProvider范围内使用');
  }
  return context;
};

步骤2：在根组件中包裹Provider #

修改路由组件Index.tsx：

import { DrawerProvider } from './DrawerContext';

const Index = () => {
  return (
    <DrawerProvider>
      <BrowserRouter>
        <Header />
        <main>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/dashboard" element={<ProtectedRoute />}>
              <Route path="user" element={<UserDashboard />} />
            </Route>
          </Routes>
        </main>
        <Footer />
      </BrowserRouter>
    </DrawerProvider>
  );
};

步骤3：修改SideBar使用Context管理状态 #

更新UserSidebar.tsx：

import { useDrawerContext } from './DrawerContext';

const UserSidebar = () => {
  const theme = useTheme();
  const { isDrawerOpen, setIsDrawerOpen } = useDrawerContext();

  return (
    <Box sx={{ display: 'flex' }}>
      <CssBaseline />
      <Drawer variant="permanent" open={isDrawerOpen}>
        <DrawerHeader>
          <IconButton onClick={() => setIsDrawerOpen(!isDrawerOpen)}>
            {theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
          </IconButton>
        </DrawerHeader>
        {/* 其余原有代码保持不变 */}
      </Drawer>
    </Box>
  );
};

步骤4：修改Header根据状态偏移Logo #

先添加Header的CSS类：

.nav-logo {
  width: 11rem;
  transition: margin-left 0.2s ease; /* 和抽屉展开动画速度保持一致 */
}

.nav-logo-shifted {
  margin-left: 15rem; /* 值等于抽屉展开后的宽度drawerWidth，比如240px≈15rem，按需调整 */
}

然后修改Header.tsx：

import { useDrawerContext } from './DrawerContext';
import { useLocation } from 'react-router-dom';

const Header = () => {
  const theme = useTheme();
  const isMatch = useMediaQuery(theme.breakpoints.down("md"));
  const { isDrawerOpen } = useDrawerContext();
  const location = useLocation();
  // 仅在Dashboard页面应用偏移
  const isInDashboard = location.pathname.startsWith('/dashboard');

  /* 其余原有代码保持不变 */

  return (
    <nav className="navbar">
      <div className="navbar-container">
        <div className={`nav-logo ${isInDashboard && isDrawerOpen ? 'nav-logo-shifted' : ''}`}>
          <Link to="/">
            <img src={logo} alt="logo" />
          </Link>
        </div>
        {/* 其余原有代码保持不变 */}
      </div>
    </nav>
  );
};

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