React+TypeScript中如何实现三个元素横向并排显示

问题出在你用普通<div>包裹了输入框和上传按钮的Grid item，MUI的Grid container仅对直接子级的Grid item生效，这个<div>会占据整行，导致内部两个Grid item上下堆叠。

修改方案一（推荐）：移除包裹的<div>，让两个Grid item直接成为外层Grid container的子元素 #

直接去掉包裹两个Grid item的<div>，用React片段<>包裹条件渲染内的两个元素，这样外层Grid container的三个Grid item会自动横向排列：

return (
<Box padding={2}>
  <Typography variant="h4">
    <FormattedMessage defaultMessage="Add file" />
  </Typography>
  <Grid container alignItems="center" spacing={2} direction="row">
    <Grid item>
      <Button
        startIcon={<Search />}
        variant="contained"
        component="label"
        disabled={rulesFromFile.isLoading}
        onClick={() => setUploadedFile(undefined)}
      >
        <FormattedMessage defaultMessage="Choose file" />
        <input
          type="file"
          hidden
          onChange={(event: ChangeEvent<HTMLInputElement>) =>
            event.target.files && setSelectedFile(event.target.files[0])
          }
        />
      </Button>
    </Grid>
    {selectedFile && (!uploadedFile || rulesFromFile.isLoading) && (
      <>
        <Grid item>
          <form>
            <TextField
              type="text"
              size="small"
              style={{marginLeft: 4}}
              label="someNumber"
              variant="outlined"
              value={someNumber}
              onChange={e => setNumber(e.target.value)}
            />
          </form>
        </Grid>
        <Grid item>
          <LoadingButton
            startIcon={<Upload />}
            loadingPosition="start"
            variant="contained"
            color="secondary"
            style={{marginLeft: 4}}
            onClick={() => {
              selectedFile &&
                rulesFromFile.mutateAsync({
                  file: selectedFile,
                  someNumber: someNumber,
                });
              setUploadedFile(selectedFile);
            }}
            loading={rulesFromFile.isLoading}
          >
            <FormattedMessage defaultMessage="{fileName} upload" values={{fileName: selectedFile.name}} />
          </LoadingButton>
        </Grid>
      </>
    )}
  </Grid>
</Box>
);

修改方案二：将<div>替换为Grid container #

把包裹两个Grid item的<div>改成Grid container，并添加item属性让它成为外层Grid的子元素，内部的Grid container会让两个元素横向排列：

return (
<Box padding={2}>
  <Typography variant="h4">
    <FormattedMessage defaultMessage="Add file" />
  </Typography>
  <Grid container alignItems="center" spacing={2} direction="row">
    <Grid item>
      <Button
        startIcon={<Search />}
        variant="contained"
        component="label"
        disabled={rulesFromFile.isLoading}
        onClick={() => setUploadedFile(undefined)}
      >
        <FormattedMessage defaultMessage="Choose file" />
        <input
          type="file"
          hidden
          onChange={(event: ChangeEvent<HTMLInputElement>) =>
            event.target.files && setSelectedFile(event.target.files[0])
          }
        />
      </Button>
    </Grid>
    {selectedFile && (!uploadedFile || rulesFromFile.isLoading) && (
      <Grid container alignItems="center" spacing={2} item>
        <Grid item>
          <form>
            <TextField
              type="text"
              size="small"
              style={{marginLeft: 4}}
              label="someNumber"
              variant="outlined"
              value={someNumber}
              onChange={e => setNumber(e.target.value)}
            />
          </form>
        </Grid>
        <Grid item>
          <LoadingButton
            startIcon={<Upload />}
            loadingPosition="start"
            variant="contained"
            color="secondary"
            style={{marginLeft: 4}}
            onClick={() => {
              selectedFile &&
                rulesFromFile.mutateAsync({
                  file: selectedFile,
                  someNumber: someNumber,
                });
              setUploadedFile(selectedFile);
            }}
            loading={rulesFromFile.isLoading}
          >
            <FormattedMessage defaultMessage="{fileName} upload" values={{fileName: selectedFile.name}} />
          </LoadingButton>
        </Grid>
      </Grid>
    )}
  </Grid>
</Box>
);

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