有条件渲染时，Material-UI TextField Outline Label 与边框重叠

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>

在选择里面添加 label="Package Type" 就可以了