Material UI OutlinedInput 标签不可见

Question

我们正在使用 Material UI 中的 OutlinedInput，但未呈现文本标签。如何解决这个问题？

import { Grid, OutlinedInput } from '@material-ui/core';

<Grid container>
  <Grid item xs={12}>
    <OutlinedInput
      label="invisible label"
      placeholder="HELLO, STACKOVERFLOW!"
      value={value}
      onChange={(e) => handleValueChange(e.target.value)}
      fullWidth
    />
  </Grid>
</Grid>

而不是预期的“不可见标签”文本，而是呈现一个空白区域（左上角）：

Answer 1

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

Answer 2

我不认为这个组件是用来单独使用的。在 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>
  );
}