如何在Material-UI的AppBar中实现居中搜索栏？

我来帮你搞定这个问题！你之前直接用AppBar的title和iconElementRight属性布局，灵活性有限，咱们换用Toolbar组件重构AppBar内容，就能轻松实现搜索栏居中的效果了。

核心思路 #

AppBar默认内部包含Toolbar，利用Toolbar的flex布局特性，我们可以把AppBar分成三个区域：左侧标题、中间搜索栏、右侧登出按钮，通过CSS flex属性控制各区域的空间占比，让搜索栏自动居中。

完整代码示例 #

首先确保你导入了所需的Material-UI组件：

import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import FlatButton from '@material-ui/core/FlatButton';
import InputBase from '@material-ui/core/InputBase';
import { makeStyles } from '@material-ui/core/styles';
// 如果需要搜索图标，还可以导入：
// import SearchIcon from '@material-ui/icons/Search';

然后创建自定义样式，优化搜索栏的外观和布局：

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  // 让左侧标题占据可用空间，推挤搜索栏到中间
  title: {
    flexGrow: 1,
    cursor: 'pointer',
  },
  search: {
    position: 'relative',
    borderRadius: theme.shape.borderRadius,
    backgroundColor: 'rgba(255,255,255,0.15)',
    '&:hover': {
      backgroundColor: 'rgba(255,255,255,0.25)',
    },
    margin: '0 16px',
    minWidth: '200px',
  },
  searchIcon: {
    padding: theme.spacing(0, 2),
    height: '100%',
    position: 'absolute',
    pointerEvents: 'none',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  inputRoot: {
    color: 'inherit',
    width: '100%',
  },
  inputInput: {
    padding: theme.spacing(1, 1, 1, 0),
    paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
    width: '100%',
  },
}));

最后重构你的AppBar组件：

const YourComponent = () => {
  const classes = useStyles();
  // 这里可以根据你的需求自定义主题
  const muiTheme = createMuiTheme();

  const handleTitleClick = () => {
    // 原来的onTitleClick逻辑
  };

  const handleLogout = () => {
    // 登出按钮的点击逻辑
  };

  return (
    <MuiThemeProvider muiTheme={muiTheme}>
      <AppBar position="static" className="navbar">
        <Toolbar>
          {/* 左侧标题 */}
          <Typography 
            variant="h6" 
            className={classes.title} 
            onClick={handleTitleClick}
          >
            Module Name
          </Typography>

          {/* 中间搜索栏 */}
          <div className={classes.search}>
            <div className={classes.searchIcon}>
              {/* 取消注释可以添加搜索图标 */}
              {/* <SearchIcon /> */}
            </div>
            <InputBase
              placeholder="Search..."
              classes={{
                root: classes.inputRoot,
                input: classes.inputInput,
              }}
              inputProps={{ 'aria-label': 'search' }}
            />
          </div>

          {/* 右侧登出按钮 */}
          <FlatButton label='LogOut' onClick={handleLogout} />
        </Toolbar>
      </AppBar>
    </MuiThemeProvider>
  );
};

关键说明 #

1. Toolbar布局：用Toolbar替代AppBar的title属性，让我们能自由排列多个元素。
2. Flex控制：给左侧标题设置flexGrow:1，它会占据左侧所有可用空间，自然把搜索栏推到中间位置。
3. 搜索栏样式：自定义的search类给搜索栏添加了半透明背景、圆角和悬停效果，你可以根据自己的UI需求调整这些样式。
4. 组件替换：如果需要更复杂的输入功能，比如带清除按钮或自动完成，可以把InputBase换成TextField组件。

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