Reactjs 在一行中获取按钮和输入字段

我正在创建一个表单，在这个表单中，我从公司数据库中提取一些数据，但字段并没有在一行中对齐。原始代码使用自定义图像来删除字段，但它从未内联。我试图创建一个新版本，其中4个字段将与delete按钮内联。这就是我目前所拥有的

从“React”导入React；
从“react dom”导入react dom；
从“@material ui/core/Grid”导入网格；
从“@material ui/core/TextField”导入TextField；
从“@material ui/icons/Delete”导入DeleteIcon；
从“@material ui/core/IconButton”导入图标按钮；
从“@material ui/core/styles”导入{makeStyles}”；
导入“/styles.css”；
const useStyles=makeStyles（主题=>({
按钮：{
页边空白：主题。间距（1）
}
}));
函数App（）{
const classes=useStyles（）；
返回(
此网格始终是自动布局的。
{/*{[1,2,3,4,5,6,7].map（（）=>（*/}
{/* ))} */}
{/*



{[1,2,3,4,5,6,7].map（（）=>(
))}
*/}
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）
在内部网格标记中，您可以给它一个带有一些flex样式的类。这将强制所有子元素位于同一行上

组件

  <Grid container spacing={10}>
    {/* {[1, 2, 3, 4, 5, 6, 7].map(() => ( */}
    <Grid className="d-flex" item form="maincomponent" xs>
      <TextField required label="true" type="number" />
      <TextField required label="true" type="number" />
      <TextField required label="true" type="number" />
      <TextField required label="true" type="number" />
      <IconButton
        color="secondary"
        className={classes.button}
        aria-label="delete"
      >
        <DeleteIcon />
      </IconButton>
    </Grid>
    {/* ))} */}
  </Grid>

参见沙盒：
沙盒似乎不存在代码沙盒链接给出了404，我担心它会这样做。在沙箱中复制粘贴代码将使其运行。必须手动添加Dependencie。很抱歉我会试着让它同时启动和运行，我一弄明白就会在这里发布。编辑：好的，它起作用了@Foreverintern刚刚给您写了一个解决方案，如果有帮助，请告诉我；）有点像！虽然我仍然面临对齐问题，但我至少能够在一行中实现所有对齐。我想我得把CSS弄得乱七八糟才行。非常感谢你的帮助！
.d-flex{
   display: flex
}