Material-UI TextField Outline Label is overlapping with border when conditionally rendered

问题

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

Steps to reproduce:

• Click "confirm" or "have a code?" to trigger a conditional render of a different form.
• Click the "Confirmation Code" TextField.

• Notice the border has rendered incorrectly and is causing the label to overlap with the border.

• For correct behavior initialize newUser with a value other than Null and see that the border has rendered correctly to accommodate the label.

Any idea why this is happening?

回答1:

A workaround that can solve it will be adding a key to the Textbox so you force it to render a new element:

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

回答2:

The workaround posted by CD above works - but this is indeed a bug.

More discussion, as well as other potential workarounds, can be found on the Github issue.

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

来源：https://stackoverflow.com/questions/57455970/material-ui-textfield-outline-label-is-overlapping-with-border-when-conditionall