如何在MUI AppBar中让搜索框显示在第二行，Logo与登录按钮在第一行

要实现Logo和登录按钮在第一行两端对齐、搜索框单独占第二行的布局，只需调整Toolbar的flex布局结构，具体修改如下：

核心修改思路 #

1. 将Toolbar设置为可换行的flex容器，让Logo与登录按钮区域占满整行并两端对齐
2. 配置搜索框组件占满第二行宽度

修改后的完整代码 #

import { Box, CssBaseline, Toolbar, Typography, IconButton, Button, Container } from '@mui/material';
import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart';
import HideOnScroll from './HideOnScroll'; // 假设该组件已正确导入
import InputSearch from './InputSearch'; // 假设该组件已正确导入

export default function NavBar(props) {
  return (
    <>
      <CssBaseline />
      <HideOnScroll {...props}>
        <AppBar elevation={0}>
          <Container sx={{ pl: { xs: '5px', sm: '5px', md: '16px' }, pr: { xs: '5px', sm: '5px', md: '16px' } }}>
            <Toolbar sx={{ 
              pl: { xs: '0px', sm: '0px', md: '16px' }, 
              pr: { xs: '5px', sm: '5px', md: '16px' },
              flexWrap: 'wrap',
              gap: 1 // 可选，控制行间距
            }}>
              {/* 第一行：Logo + 登录按钮区域 */}
              <Box sx={{ 
                display: 'flex', 
                justifyContent: 'space-between', 
                alignItems: 'center', 
                width: '100%' 
              }}>
                <Typography sx={{ fontWeight: 600 }}>LOGO</Typography>
                <div> {/* 若DivRight是自定义组件可直接替换此处div */}
                  <IconButton sx={{ color: '#fff' }} size='large' aria-label="add to shopping cart">
                    <AddShoppingCartIcon />
                  </IconButton>
                  <Button variant="outlined" size='small' sx={{backgroundColor:'#fff', height:'30px', borderColor:'#fff'}}>Login</Button>
                </div>
              </Box>

              {/* 第二行：搜索框 */}
              <InputSearch sx={{ width: '100%' }} />
            </Toolbar>
          </Container>
        </AppBar>
      </HideOnScroll>
    </>
  )
}

补充说明 #

• 确保InputSearch内部的输入组件（如TextField）设置了fullWidth: true，这样搜索框才能占满第二行宽度
• 若需要仅在特定屏幕尺寸下生效（比如仅移动端让搜索框换行），可通过MUI的响应式断点调整Box和InputSearch的width属性，例如：width: { xs: '100%', md: 'auto' }

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