reactjs - Material UI OutlinedInput 标签不可见

Question

我们正在使用 OutlinedInput 来自 Material 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)覆盖它即可。 .此外，使用 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>
  );
}