我们正在使用 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>
而不是预期的“不可见标签”文本,而是呈现一个空白区域(左上角):最佳答案
我不认为这个组件是用来单独使用的。在 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>
);
}
关于reactjs - Material UI OutlinedInput 标签不可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62261164/