如何在包含在<Box>中的新行中放置组件？

Question

我的所有组件都包含在一个标记中，并且希望将submit按钮与3个文本字段分开。我试过使用<br />标记，但这不起作用。

这是网站

下面是我的代码：

<Box
    component="form"
    noValidate
    autoComplete="off"
    display="flex"
    alignItems="center"
    justifyContent="center">

    <TextField
        label="Height (Feet)"
        id="outlined-start-adornment"
        type='number'
        sx={{ marginX: 2 }}
        InputProps={{
            startAdornment: <InputAdornment position="start">ft:</InputAdornment>,
        }}
    />

    <TextField
        label="Height (Feet)"
        id="outlined-start-adornment"
        type='number'
        sx={{ marginX: 2 }}
        InputProps={{
            startAdornment: <InputAdornment position="start">in:</InputAdornment>,
        }}
    />

    <TextField
        label="Weight"
        id="outlined-start-adornment"
        type='number'
        sx={{ marginX: 2 }}
        InputProps={{
            startAdornment: <InputAdornment position="start">lbs:</InputAdornment>,
        }}
    />
    <Button variant="contained" type='submit'>Submit</Button>
</Box>

Answer 1

您可以简单地将Button移出Box之外。

<Box>
  // Your inputs...
</Box>
<Button />

您可能需要将所有内容都封装在反应片段 <> // Your code... </>中。