Material UI React如何实现Box下方文本与文本按钮同行居两侧对齐

在Material UI React框架中，我目前很难将文本和文本按钮对齐到Box下方的同一行，当前实现效果见截图：

我需要实现的效果是：“Sign using your mouse or touchpad.”文本和“Redo signature”按钮位于Box下方的同一行，分别居于行的两侧。

我尝试了多种方案，目前的代码是最接近预期的，但还是无法让按钮固定在Box下方、和文本分别处于行的两端，代码如下：

React代码： #

<Box className={classes.counterSignatureContainer}>
          <Box className={classes.canvasContainer}>
            <canvas ref={canvasRef} height={158} width={510} />
          </Box>
        </Box>
        <Grid container spacing={3}>
          <Grid
            container
            direction="row"
            justify="space-between"
            alignItems="center"
          >
            <Grid item xs={6}>
              <Box className={classes.instructionContainer}>
                <Typography variant="caption">
                  <FormattedMessage
                    defaultMessage={'Sign using your mouse or touch pad.'}
                  />
                </Typography>
              </Box>
            </Grid>
            <Grid item xs={3}>
              <Box className={classes.redoContainer}>
                <Button
                  disabled={!signatureData}
                  color="primary"
                  title="Redo signature"
                  onClick={clear}
                  fullWidth={false}
                >
                  <FormattedMessage defaultMessage={'Redo signature'} />
                </Button>
              </Box>
            </Grid>
          </Grid>
        </Grid>
        <Box className={classes.countersignButtonContainer}>
          <Button
            disabled={!signatureData}
            color="primary"
            variant="outlined"
            title="Countersign"
            onClick={handleCountersign}
            fullWidth={false}
          >
            <FormattedMessage defaultMessage={'Countersign'} />
          </Button>
        </Box>

对应样式代码： #

counterSignatureContainer: {
    textAlign: 'center',
    position: 'relative',
    margin: theme.spacing(8, 0, 0, 5),
    width: SIGNATURE_CONTAINER_WIDTH,
    height: 160,
    backgroundColor: '#E1E1E1',
  },
  canvasContainer: {
    position: 'relative',
    display: 'flex',
    flex: 1,
  },
  instructionContainer: {
    margin: theme.spacing(1, 6),
    color: '#393939',
  },
  countersignButtonContainer: {
    margin: theme.spacing(1, 6),
  },
  signatureContainer: {
    textAlign: 'center',
    position: 'relative',
    margin: theme.spacing(3, 5),
    width: 512,
    height: 160,
    backgroundColor: '#0000000A',
  },
  signature: {
    maxWidth: '100%',
    maxHeight: '100%',
  },
  redoContainer: {
    margin: theme.spacing(1, 0, 0, -1),
  },

你遇到的布局问题核心有两点：一是嵌套了多余的Grid容器导致有效宽度被限制，二是固定了Grid项的宽度，留白太多导致按钮无法靠到最右侧。按以下步骤修改即可实现预期效果：

1. 简化布局结构 #

删掉外层多余的Grid container spacing={3}容器，不要固定子Grid项的xs宽度，让内容自适应：

<Box className={classes.counterSignatureContainer}>
  <Box className={classes.canvasContainer}>
    <canvas ref={canvasRef} height={158} width={510} />
  </Box>
</Box>
<Grid
  container
  direction="row"
  justify="space-between"
  alignItems="center"
  className={classes.bottomRowContainer}
>
  <Grid item>
    <Box className={classes.instructionContainer}>
      <Typography variant="caption">
        <FormattedMessage
          defaultMessage={'Sign using your mouse or touch pad.'}
        />
      </Typography>
    </Box>
  </Grid>
  <Grid item>
    <Box className={classes.redoContainer}>
      <Button
        disabled={!signatureData}
        color="primary"
        title="Redo signature"
        onClick={clear}
        fullWidth={false}
      >
        <FormattedMessage defaultMessage={'Redo signature'} />
      </Button>
    </Box>
  </Grid>
</Grid>
<Box className={classes.countersignButtonContainer}>
  <Button
    disabled={!signatureData}
    color="primary"
    variant="outlined"
    title="Countersign"
    onClick={handleCountersign}
    fullWidth={false}
  >
    <FormattedMessage defaultMessage={'Countersign'} />
  </Button>
</Box>

注：如果你使用的是MUI v5版本，需要把Grid容器的justify属性替换为justifyContent，对应API有调整。

2. 调整样式匹配宽度 #

给新增的bottomRowContainer设置和上方签名框一致的宽度，调整边距避免错位：

counterSignatureContainer: {
    textAlign: 'center',
    position: 'relative',
    margin: theme.spacing(8, 0, 0, 5),
    width: SIGNATURE_CONTAINER_WIDTH,
    height: 160,
    backgroundColor: '#E1E1E1',
  },
  // 新增底部行样式，和上方签名框宽度、边距对齐
  bottomRowContainer: {
    width: SIGNATURE_CONTAINER_WIDTH,
    margin: theme.spacing(1, 0, 0, 5),
    padding: '0 16px',
  },
  canvasContainer: {
    position: 'relative',
    display: 'flex',
    flex: 1,
  },
  instructionContainer: {
    margin: 0,
    color: '#393939',
  },
  countersignButtonContainer: {
    margin: theme.spacing(1, 6),
  },
  signatureContainer: {
    textAlign: 'center',
    position: 'relative',
    margin: theme.spacing(3, 5),
    width: 512,
    height: 160,
    backgroundColor: '#0000000A',
  },
  signature: {
    maxWidth: '100%',
    maxHeight: '100%',
  },
  redoContainer: {
    margin: 0,
  },

如果不想用Grid布局，也可以直接用Box的flex属性实现，代码更简洁：把中间的Grid容器替换为<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>即可，效果完全一致。

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