如何为Grid同一行内的Button和CircularProgress组件添加间距

你使用的Material UI的Grid容器spacing属性仅对直接子节点为Grid item的元素生效，你直接将Button和CircularProgress作为Grid容器的子元素，所以设置的spacing属性不会产生间距。另外你设置的spacing={50}数值过大，MUI默认spacing以8px为单位，50对应400px间距，就算生效也不符合你要的少量间距需求。

• 方案1：给两个子元素套Grid item，使用原生spacing控制间距
  调整spacing到合适数值，比如spacing={2}对应16px间距，同时添加对齐属性保证两个元素垂直居中，修改后代码如下：

<Grid
  container
  direction="row"
  spacing={2}
  alignItems="center"
>
  <Grid item>
    <Button
      variant="contained"
      color="primary"
      size="large"
      style={{ marginTop: '1em' }}
      onClick={() => {
        //code
      }}
    >
      Import Games
    </Button>
  </Grid>
  {showCircularProgress ? (
    <Grid item>
      <CircularProgress style={{ marginTop: '1em' }} />
    </Grid>
  ) : null}
</Grid>;

• 方案2：直接加边距，无需修改结构
  直接给CircularProgress添加上左外边距即可，调整数值到你需要的间距大小即可：

<CircularProgress style={{ marginTop: '1em', marginLeft: '12px' }} />

也可以给Button加右外边距，效果完全一致：

<Button
  variant="contained"
  color="primary"
  size="large"
  style={{ marginTop: '1em', marginRight: '12px' }}
  onClick={() => {
    //code
  }}
>

• 方案3：给Grid容器加gap属性
  直接通过flex布局的gap属性控制间距，不需要修改子元素结构，还可以把公共的marginTop属性提出来简化代码：

<Grid
  container
  direction="row"
  style={{ gap: '12px', marginTop: '1em' }}
  alignItems="center"
>

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