Material UI Grid组件如何将内容排列方向修改为水平行？

问题原因 #

direction="row"这类flex布局相关属性仅对标注了container属性的Grid容器生效，你当前的Grid加了item属性，属于布局子项，不会处理内部元素的排列规则，所以设置不生效。

修复方法 #

根据你的布局场景二选一即可：

• 方案1：直接将当前Grid改为容器类型，适合这个Grid是最外层布局、不需要作为其他Grid子项的场景
  代码示例：

  <Grid container sm={4} xs={12} direction="row" gap={1} alignItems="center">
    <Autocomplete />
    <button />
  </Grid>
  

  说明：gap={1}用来控制两个组件的横向间距，alignItems="center"可以让两个组件垂直居中对齐，参数可以根据实际需求调整。

• 方案2：保留外层Grid的item属性，内部嵌套一层容器Grid，适合这个Grid本身属于更大的Grid布局子项的场景
  代码示例：

  <Grid item sm={4} xs={12}>
    <Grid container direction="row" gap={1} alignItems="center">
      <Autocomplete />
      <button />
    </Grid>
  </Grid>
  

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