如何在Material-UI AppBar中定位元素？附现有代码

嘿，我来帮你搞定Material-UI AppBar里的元素定位问题～其实核心很简单，因为Material-UI的Toolbar默认是flex布局容器，我们可以利用flex的特性轻松控制元素位置，下面给你几种常用方案，结合你的代码来修改：

1. 最常用：把部分元素推到右侧 #

如果你想让标题靠左，其他链接靠右，只需要在中间加一个“占位元素”占据剩余空间就行。推荐用Material-UI的Box组件（比原生div更贴合Material-UI的样式系统）：

import React from 'react';
import { AppBar, Toolbar, Typography, Box } from '@material-ui/core';
import { Link } from 'react-router-dom';

const NavBar = ({ classes }) => (
  <div style={{ flexGrow: 1 }}>
    <AppBar position="static" elevation={0} className={classes.appBar}>
      <Toolbar>
        {/* 左侧的标题链接 */}
        <Link exact to="/" className={classes.navLink}>
          <Typography variant="h6">Title</Typography>
        </Link>

        {/* 这个Box会占据Toolbar里所有剩余水平空间，把右侧元素挤到右边 */}
        <Box flexGrow={1} />

        {/* 右侧的导航链接 */}
        <Link exact to="/about" className={classes.navLink}>
          <Typography variant="body1">About</Typography>
        </Link>
        {/* 可以继续加更多链接 */}
        <Link exact to="/contact" className={classes.navLink}>
          <Typography variant="body1">Contact</Typography>
        </Link>
      </Toolbar>
    </AppBar>
  </div>
);

export default NavBar;

2. 快速分散布局：用Toolbar的justifyContent属性 #

如果你的布局是“左-右”或者“左-中-右”，可以直接给Toolbar设置justifyContent属性，比如space-between（左右分散）或者space-around：

<Toolbar justifyContent="space-between">
  {/* 左侧元素 */}
  <Link exact to="/" className={classes.navLink}>
    <Typography variant="h6">Title</Typography>
  </Link>

  {/* 右侧元素：把多个链接包在一个div里，避免被分散开 */}
  <div className={classes.navGroup}>
    <Link exact to="/about" className={classes.navLink}>
      <Typography variant="body1">About</Typography>
    </Link>
    <Link exact to="/contact" className={classes.navLink}>
      <Typography variant="body1">Contact</Typography>
    </Link>
  </div>
</Toolbar>

3. 复杂布局：左-中-右三部分 #

如果需要中间也有元素，用两个Box flexGrow={1}来分隔就行：

<Toolbar>
  {/* 左侧 */}
  <Link exact to="/" className={classes.navLink}>
    <Typography variant="h6">Title</Typography>
  </Link>

  <Box flexGrow={1} />

  {/* 中间 */}
  <Typography variant="body1">Welcome Back!</Typography>

  <Box flexGrow={1} />

  {/* 右侧 */}
  <Link exact to="/profile" className={classes.navLink}>
    <Typography variant="body1">Profile</Typography>
  </Link>
</Toolbar>

小提示 #

• 如果你用的是Material-UI v5，组件导入路径是@mui/material/xxx，Typography的variant命名可能略有调整（比如h6代替旧版的title），但flex布局的核心逻辑完全一致。
• 可以通过自定义classes来调整元素的间距、样式，配合flex属性一起使用效果更好。

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