React flex容器内Material UI组件无间距无法均匀对齐问题

问题根因 #

• 你为.InputContainer设置了flex布局，但该容器的直接子元素仅有<form>一个，flex规则只会作用于form标签，完全不会影响form内部的输入框、按钮、图标等元素，这是对齐和间距失效的核心原因。
• form标签默认是块级元素，内部的行内/行内块元素默认没有间距，自然会紧贴在一起。

修复方案 #

方案1：修改CSS（无需改动JSX结构） #

直接给form标签添加flex布局规则即可：

.InputContainer {
  background-color: white;
  min-height: 72px;
  padding: 16px;
  margin-bottom: 16px;
  width: 878px;
  box-sizing: border-box; /* 防止padding撑宽容器 */
}
/* 新增form的flex规则，这是核心修改 */
.InputContainer form {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 16px; /* 统一设置元素间间距，兼容现代浏览器 */
}
.input {
  flex: 1; /* 输入框平分可用宽度，不需要可删除自行设置固定宽度 */
  min-height: 40px;
  background-color: #fafafa;
}
.addButton {
  height: 38px;
  /* 删除原有margin-top，flex的align-items已经实现垂直对齐 */
}

如果需要兼容不支持gap属性的旧浏览器，可替换为下边距规则：

.InputContainer form > *:not(:last-child) {
  margin-right: 16px;
}

方案2：使用Material UI 原生组件（更符合开发规范） #

MUI自带的Stack组件可以快速实现弹性布局，无需手写大量CSS：
首先引入Stack组件：

import Stack from '@mui/material/Stack';

修改JSX结构，将form内的所有控件用Stack包裹：

<div className="InputContainer">
  <form onSubmit={(event) => handleAddPerson(event)}>
    <Stack direction="row" spacing={2} alignItems="center" width="100%" justifyContent="space-evenly">
      <TextField
        className="input"
        id="name"
        required
        label="Name"
        variant="filled"
        value={name}
        onChange={handleNameChange} />
      <TextField
        className="input"
        id="email"
        required
        label="E-mail address"
        variant="filled"
        value={email}
        onChange={handleEmailChange} />
      <TextField
        className="input"
        id="phone"
        required
        label="Phone number"
        variant="filled"
        value={phone}
        onChange={handlePhoneChange} />
      <Button
        className="addButton"
        variant="outlined"
        type="submit"
      >Add
      </Button>
      <CustomizedTooltip className="tooltip" title={tooltipText}>
        <IconButton><HelpOutlineIcon /></IconButton>
      </CustomizedTooltip>
    </Stack>
  </form>
</div>

spacing属性可直接控制元素间距，单位是MUI默认的8px基础间距，spacing={2}即16px间距。

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