MUI Grid动态表单中设置md={6}无法并排排列问题

你遇到的问题核心是没有将动态生成的Grid组件包裹在Grid容器（Grid container）中。MUI的Grid布局依赖container作为父容器启用flex布局规则，来管理子item的排列；如果缺少外层container，每个Grid item会默认以块级元素渲染，自然会各自换行。

修改后的代码 #

把动态渲染的Grid组件整体包裹在<Grid container>里即可：

<Grid container spacing={2}> {/* spacing可选，用来控制item间间距 */}
  {fieldSet.map((item, index) => {
    if(item.domain === null){
      if(item.alias == 'OBJECTID'){
        return;
      };
      return (
          <Grid xs={12} md={6} lg={6} key={index}>
              <FormControl variant="standard" fullWidth style={{marginBottom:'10px'}}>
              <InputLabel shrink multiline htmlFor={item.alias} style={{color:'white'}}>{item.alias}</InputLabel>
              <StyledInput id={item.alias} onChange={e => setFieldsData(fieldsData => ({...fieldsData, [e.target.id]: e.target.value}))} />
              </FormControl>
          </Grid>
      )
    } else if(item.domain != null){
      return (
          <Grid xs={12} md={6} lg={6} key={index}>
              <FormControl fullWidth size='small' style={{marginTop:'20px'}}>
              <InputLabel id={item.alias}>{item.alias}</InputLabel>
              <Select id={item.alias} labelId={item.alias} onChange={e => setFieldsData(fieldsData => ({...fieldsData, [item.alias]: e.target.value}))} style={{backgroundColor:'white'}}>
                {item.domain.codedValues.map((values, index) => {
                  return (
                    <MenuItem key={index} value={values.name}>{values.name}</MenuItem>
                  )
                })}
              </Select>
              </FormControl>
          </Grid>
      )
    }
  })}
</Grid>

额外注意点 #

• spacing属性可按需调整，用来控制Grid item之间的间距；
• 确保父容器有足够宽度，避免因容器过窄导致item被迫换行；
• 检查自定义StyledInput或其他组件是否设置了非100%的宽度，避免破坏Grid布局规则。

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