就像@丹尼尔L提到的，你必须在FormControl组件中使用InputLabel组件，但是除了他的答案之外-我必须在我的OutlinedInput组件上添加一个label属性，这样输入上的轮廓就不会与我的标签重叠。
不带label属性的代码：

<FormControl sx={{ m: 1, width: '25ch' }} variant="outlined">
    <InputLabel htmlFor='display-name'>Display Name</InputLabel>
        <OutlinedInput
            id="display-name"
            value={displayName}
            onChange={(e) => handleInputChange(e)}
            aria-describedby="base-name-helper-text"
            inputProps={{
             'aria-label': 'weight',
            }}
      />
   </FormControl>

使用label属性编写代码：

<FormControl sx={{ m: 1, width: '25ch' }} variant="outlined">
    <InputLabel htmlFor='display-name'>Display Name</InputLabel>
        <OutlinedInput
            id="display-name"
            value={displayName}
            label='Display Name'
            onChange={(e) => handleInputChange(e)}
            aria-describedby="base-name-helper-text"
            inputProps={{
             'aria-label': 'weight',
            }}
      />
   </FormControl>

我不认为这个组件是用来单独使用的。在MUI文档中，它主要用作TextField等其他组件的扩充

<TextField id="outlined-basic" label="Outlined" variant="outlined" />

如果你检查开发工具中的样式，看起来像是CSS属性visibility: hidden导致了这个问题。事实上，如果您删除该样式，您将看到标签工作正常。

但是，如果您已经使用此组件构建了大部分应用程序，并且需要显示该标签，则只需使用MUI的样式解决方案（如makeStyles）覆盖它。此外，使用notched prop为其分配空间

const useStyles = makeStyles({
  customInputLabel: {
    "& legend": {
      visibility: "visible"
    }
  }
});

export default function App() {
  const classes = useStyles();

  return (
    <div className="App">
      <Grid container>
        <Grid item xs={12}>
          <OutlinedInput
            classes={{ notchedOutline: classes.customInputLabel }}
            label="visible label"
            placeholder="HELLO, STACKOVERFLOW!"
            fullWidth
            notched
          />
        </Grid>
      </Grid>
    </div>
  );
}

我遇到了同样的问题，我将OutlinedInput Package 到FormControl元素中，并将InputLabe组件作为标签附加，这解决了我的问题。

对此的快速答案基本上是将组件 Package 在FormControl下，并在OutlinedInput组件之上添加InputLabel。
根据您的代码，它应该看起来像这样：

<Grid container>
    <Grid item xs={12}>
        <FormControl>
            <InputLabel htmlFor="outlined-adornment">Some text</InputLabel>
            <OutlinedInput
                id="outlined-adornment"
                placeholder="HELLO, STACKOVERFLOW!"
                value={value}
                onChange={(e) => handleValueChange(e.target.value)}
                fullWidth
            />
        </FormControl>
    </Grid>
</Grid>