reactjs - Material-UI TextField 大纲标签在有条件地呈现时与边框重叠

Question

https://codesandbox.io/s/material-demo-04y5b

重现步骤:

• 点击“确认”或“有代码？”触发不同形式的条件渲染。
• 点击“确认码”TextField。

• 请注意边框呈现不正确并导致标签与边框重叠。

• 为获得正确的行为，使用 Null 以外的值初始化 newUser，并查看边框是否已正确呈现以适应标签。

知道为什么会这样吗？

Answer 1

<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"这就是工作