Material-UI TextField大纲标签在有条件渲染时与边框重叠

Question

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

复制步骤：

• 点击“确认”或“输入验证码？”触发不同形式的条件渲染。
• 点击“确认码” TextField。

• 请注意边框渲染不正确，并导致标签与边框重叠。

• 为获得正确的行为，请使用除Null以外的其他值初始化newUser，并查看边框是否已正确渲染以容纳标签。

知道为什么会这样吗？

Answer 1

可以解决此问题的解决方法是在文本框中添加key，以便您强制其呈现新元素：

<TextField
  key="Confirmation Code"
  variant="outlined"
  margin="normal"
  required
  fullWidth
  id="email"
  label="Confirmation Code"
  name="email"
  autoComplete="confirmation code"
/>

Answer 2

如果您在这里是为了选择字段，您可以使用 labelWidth 上的 Select 道具和 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>

Answer 3

上面CD所发布的解决方法有效-但这确实是一个错误。

有关更多讨论以及其他可能的解决方法，请参见Github问题。

https://github.com/mui-org/material-ui/issues/16833