https://codesandbox.io/s/material-demo-04y5b
重现步骤：
- 点击“确认”或“有密码？” 触发不同形式的条件渲染。
- 点击“确认码”
TextField。 请注意，边框呈现错误并导致标签与边框重叠。
对于正确的行为，使用 Null 以外的值初始化 newUser 并查看边框是否已正确呈现以容纳标签。
知道为什么会这样吗？
Material-UI TextField Outline Label 在条件渲染时与边框重叠
IT技术
reactjs
material-ui
2021-05-09 01:59:03
4个回答
可以解决它的解决方法是将 a 添加key到文本框，以便您强制它呈现新元素：
<TextField
key="Confirmation Code"
variant="outlined"
margin="normal"
required
fullWidth
id="email"
label="Confirmation Code"
name="email"
autoComplete="confirmation code"
/>
<FormControl variant="outlined" className={classes.formControl} style={{ width: '100%' }}>
<InputLabel id="demo-simple-select-outlined-label-type">Package Type</InputLabel>
<Select
labelId="demo-simple-select-outlined-label-type"
id="demo-simple-select-outlined"
{...field}
required
label="Package Type"
className={classes.formControl}
>
<MenuItem value="chart">Chart</MenuItem>
<MenuItem value="email">Email</MenuItem>
<MenuItem value="social">Social</MenuItem>
</Select>
</FormControl>
在 select 中添加 label="Package Type" 就可以了
上面 CD 发布的解决方法有效 - 但这确实是一个错误。
更多讨论以及其他潜在的解决方法，可以在 Github 问题上找到。
如果您在这里选择 Select 字段，则可以使用labelWidthpropSelect和FormControl.
<FormControl variant="outlined" style={{ minWidth: 300 }}>
<InputLabel id="demo-simple-select-label">
Calendar to Add Event
</InputLabel>
<Select
labelWidth={150}
labelId="demo-simple-select-label"
id="demo-simple-select"
value={value}
onChange={onChange}
fullWidth
>
{menuArray}
</Select>
</FormControl>