Material UI新手开发表单时Input组件样式渲染异常，求助排查

我是Material UI的新手，当前遇到的大概率是基础使用层面的简单问题。

我的实现代码如下：

<Container>
    <FormControl>
        <FormGroup>
          <InputLabel htmlFor="email">Email address</InputLabel>
          <Input id="email" />
        </FormGroup>
        <FormGroup>
          <InputLabel htmlFor="password">Password</InputLabel>
          <Input id="password" />
        </FormGroup>
    </FormControl>
</Container>

我无法定位代码中的错误，页面实际渲染出现了标签错位、输入框布局偏移的异常效果，完全不符合预期的垂直表单样式。请问我的代码编写存在哪些问题？

错误定位与修正方案 #

出现这类布局错位的核心原因是组件组合逻辑不符合Material UI的设计约定：

• FormControl是单表单输入项的布局容器，作用是为单个输入组件自动对齐配套的标签、辅助文案、错误提示的相对位置，它的布局计算逻辑是基于“容器内仅包含一个可交互输入控件”的前提实现的
• 你把邮箱、密码两个独立的输入项整体嵌套在同一个FormControl内，组件的对齐逻辑会把两个输入项的标签、输入框当成同一组内容计算相对位置，最终就会出现标签偏移、输入框叠放错位的问题
• 额外嵌套的FormGroup并不适用于垂直排列的文本输入场景：这个组件的设计初衷是包裹关联的复选框、单选按钮组，用来控制同组选项的垂直/水平排布，用在普通文本输入场景下不仅没有布局增益，反而会干扰原有组件的正常样式计算

可正常运行的参考代码 #

每个独立输入项单独包裹对应的FormControl，通过间距属性控制两个输入项的垂直距离即可，不需要额外嵌套不匹配的组件：

<Container>
  <FormControl sx={{ mt: 3 }}>
    <InputLabel htmlFor="email">Email address</InputLabel>
    <Input id="email" />
  </FormControl>

  <FormControl sx={{ mt: 3 }}>
    <InputLabel htmlFor="password">Password</InputLabel>
    <Input id="password" />
  </FormControl>
</Container>

补充说明：如果追求更便捷的表单搭建体验，可以直接使用MUI的TextField组件替代手动拼接InputLabel + Input的写法。该组件已经内置了表单元素的对齐逻辑，能大幅减少这类手动组合组件导致的布局错位问题。

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