材质UI OutlinedInput标签不可见

时间:2020-06-08 11:35:27

标签: reactjs input react-tsx react-material

我们正在从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>

而不是预期的“不可见标签”文本,而是显示一个空白区域(左上角):

demo screenshot

1 个答案:

答案 0 :(得分:1)

我认为该组件不应单独使用。在MUI文档中,它主要用作TextField

之类的其他组件的增强。
<TextField id="outlined-basic" label="Outlined" variant="outlined" />

如果您在开发工具中检查样式,则看起来CSS属性visibility: hidden引起了此问题。实际上,如果删除该样式,则会看到该标签有效。

enter image description here


但是,如果您已经使用此组件构建了大部分应用程序,并且需要显示该标签,则可以使用MUI的样式解决方案(例如makeStyles)覆盖它。另外,使用notched道具为其分配空间

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

Edit musing-morning-sqn5q