react mui 一个按钮大小的两个小按钮答案

【问题标题】：React mui one button size of two small buttonsreact mui 一个按钮大小的两个小按钮
【发布时间】：2023-02-09 21:51:00
【问题描述】：

我想知道如何使用 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>

【问题讨论】：

标签： css reactjs react-mui

【解决方案1】：

查看本教程：https://mui.com/material-ui/react-grid/

应该是这个样子：

<Box display="grid" gridTemplateColumns="repeat(12, 1fr)" gap={2}>
  <Box gridColumn="span 6">
    BUTTON
  </Box>
  <Box gridColumn="span 6">
    BUTTON
  </Box>
 <Box gridColumn="span 12">
    BUTTON
  </Box>
</Box>

【讨论】：