我们正在从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>
而不是预期的“不可见标签”文本,而是显示一个空白区域(左上角):
答案 0 :(得分:1)
我认为该组件不应单独使用。在MUI文档中,它主要用作TextField
<TextField id="outlined-basic" label="Outlined" variant="outlined" />
如果您在开发工具中检查样式,则看起来CSS属性visibility: hidden
引起了此问题。实际上,如果删除该样式,则会看到该标签有效。
但是,如果您已经使用此组件构建了大部分应用程序,并且需要显示该标签,则可以使用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>
);
}