reactjs - Material UI OutlinedInput 标签不可见

Question

我们在OutlinedInputMaterial UI 中使用，但没有渲染文本标签。如何解决这个问题？

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

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

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

如果您在开发工具中检查样式，则似乎是 CSS 属性visibility: hidden导致了此问题。事实上，如果您删除该样式，您将看到该标签有效。

---

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

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>
  );
}

Answer 2

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