有条件地渲染时，Material-UI TextField轮廓标签与边框重叠 [英] Material-UI TextField Outline Label is overlapping with border when conditionally rendered

问题描述

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

复制步骤:

• 点击确认"或输入验证码?"触发不同形式的条件渲染.
• 点击确认码" TextField.

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

• 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.

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

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

知道为什么会这样吗?

推荐答案

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

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"
/>

这篇关于有条件地渲染时，Material-UI TextField轮廓标签与边框重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！