MUI组件同行显示问题求助：Grid与Autocomplete布局修正

问题分析 #

• Grid项无法同行显示：前两个Grid的xs值设置过小（仅2），且第三个Grid未指定响应式宽度，导致在小屏幕下总宽度超出容器换行；同时容器未设置垂直对齐，元素排布混乱。
• 文本与下拉框不同行：Typography默认是块级元素，且CycleDropdown内部的TextField设置了mt: '10px'的上边距，导致下拉框被挤到文本下方。

修正方案 #

1. 调整Grid容器与子项布局 #

修改Grid容器属性，添加垂直对齐，同时为第三个Grid项设置合适的响应式宽度，确保所有子项在各断点下能容纳在同一行：

<Grid container marginTop={2} alignItems="center" spacing={2}>
  <Grid item lg={3} md={3} xs={4}>
    <Typography variant="h3" color="inherit">
      Daily Summary
    </Typography>
  </Grid>
  <Grid item lg={3} md={3} xs={4}>
    <Typography variant="h3">{currentDate}</Typography>
  </Grid>
  <Grid item lg={6} md={6} xs={4}>
    <Typography variant="h3" sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
      Daily Summary Update Cycle: <CycleDropdown />
    </Typography>
  </Grid>
</Grid>

核心调整点：

• alignItems="center"：让三个Grid项垂直居中对齐
• 响应式列宽分配：lg/md下前两项各占3列，第三项占6列（总和12）；xs下每项占4列，刚好填满12列，避免换行
• spacing={2}：给Grid项之间添加间距，优化布局
• 第三个Typography设置display: 'flex'、alignItems: 'center'和gap:1，实现文本与下拉框横向排列并对齐

2. 修改CycleDropdown组件样式 #

移除TextField的上边距，避免与文本错位：

import { Autocomplete, TextField } from '@mui/material'
import React, { useState } from 'react'

const options = [
  'Never',
  'Every Minute',
  'Every 2 Minute',
  'Every 5 Minute',
  'Every 10 Minute',
  'Every 30 Minute',
]

const CycleDropdown: React.FC = () => {
  const [value, setValue] = useState('Never')

  const handleChange = (
    event: React.ChangeEvent<{}>,
    newValue: string | null
  ) => {
    setValue(newValue || '')
  }

  return (
    <Autocomplete
      value={value}
      onChange={handleChange}
      options={options}
      renderInput={(params) => (
        <TextField
          {...params}
          label="Select Cycle"
          size="small"
          variant="outlined"
        />
      )}
    />
  )
}

export default CycleDropdown

关键说明 #

• MUI Grid采用12列布局，子项的列数总和在每个断点下不能超过12，否则会自动换行
• 块级元素内部嵌套组件时，需通过display: flex实现横向排列
• 组件的内边距/外边距会直接影响对齐效果，需根据布局需求精准调整

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