React MUI5导航栏项无法横向排列，堆叠异常问题求助

数据老陈

2026-7-23

导航栏横向均匀分布修复方案

问题根源

包裹导航链接的<div>未启用弹性布局，导致NavLink默认以块级元素纵向堆叠
NavigTypo里的display: flex和justify-content: space-between属于冗余设置，反而打乱了文字布局
导航项之间没有设置间距，挤在一起就出现了重叠

修改步骤&修复后代码

调整样式结构，给导航容器开启flex布局、添加间距，同时清理冗余样式：

import React from "react";
import { Toolbar, Typography } from "@mui/material";
import { styled } from '@mui/material/styles'
import { NavLink } from "react-router-dom";
import Logo from '../assets/travelLogo.png'

const NavigBar = styled(Toolbar)(({theme}) =>({
  backgroundColor: theme.palette.background.default,
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center', // 让Logo和导航项垂直居中
  padding: '0 1rem', // 可选：加左右内边距避免内容贴边
}));
// 移除冗余flex样式，添加导航项横向间距
const NavigTypo = styled(Typography)(({theme}) => ({
    color: "white",
    margin: '0 1.5rem',
}));
// 给导航容器设置flex布局，让链接横向排列
const NavContainer = styled('div')({
  display: 'flex',
  alignItems: 'center',
});

function Navbar(){
    return(
        <NavigBar>
            <img src={Logo} alt="logo"/>
            <NavContainer>
              <NavLink to="/">
                  <NavigTypo variant="h5">HOME</NavigTypo>
              </NavLink>
              <NavLink to="/info">
                  <NavigTypo variant="h5">INFO</NavigTypo>
              </NavLink>
              <NavLink to="/contact">
                  <NavigTypo variant="h5">CONTACT US</NavigTypo>
              </NavLink>
            </NavContainer>
        </NavigBar>
    )
}

export default Navbar;