我想知道如何使用MUI組件實現圖像中顯示的設計。

我的問題是，我不知道如何將第三個按鈕插入到MUI網格中，以便它與其他兩個按鈕具有相同的寬度。

<Container>
  <Grid
    container
    direction="row"
    justifyContent="flex-start"
    alignItems="center"
    spacing={4}
  >
    <Grid item>
      <Button variant="outlined" onClick={() => {}}>
        Button 1
      </Button>
    </Grid>

    <Grid item>
      <Button color="secondary" variant="contained" onClick={() => {}}>
        Button 2
      </Button>
    </Grid>
  </Grid>
</Container>

查看這個教程:https://mui.com/material-ui/react-grid/

應該是這樣的:

<Grid container spacing={2}>
  <Grid item xs={6}>
    BUTTON
  </Grid>
  <Grid item xs={6}>
    BUTTON
  </Grid>
  <Grid item xs={12}>
    BUTTON
  </Grid>
</Grid>

其中xs={value}定義了網格項目應該有多大。 因此，對于您的情況，您需要在一個列的頂部添加兩個相等的列，該列是上述列的總和。