文本字段中标签重叠和模糊的问题

Question

当我单击或开始在文本字段中输入内容时，标签“在此处输入您的新任务”会向上移动，并被看起来像白色的覆盖层遮盖。如何消除这种行为并确保标签保持完全可见？

在关注它之前::

当聚焦时：

这是我使用的代码。我使用 Material UI 来设计它。

 <DialogTitle>Add New Task</DialogTitle>
    <DialogContent>
      <TextField
        autoFocus
        label={isEmpty ? "Task can't be empty" : "Type your New Task here"}
        fullWidth
        variant="outlined"
        value={todoName}
        inputRef={todoInput}
        onChange={(e) => {
          setTodoName(e.target.value.toLowerCase());
          setIsEmpty(false);
        }}
        InputProps={{
          style: { color: isEmpty ? warningColor : "initial" },
        }}
        InputLabelProps={{
          style: { color: isEmpty ? warningColor : "initial" },
        }}
        error={isEmpty}
      />
    </DialogContent>
    <DialogActions>
      <Button onClick={handleClose} color="primary">
        Cancel
      </Button>
      <Button
        onClick={addTodo}
        color="primary"
        disabled={isEmpty || isLoading}
      >
        Add
      </Button>
    </DialogActions>
  </Dialog>

任何帮助将不胜感激。谢谢。

Answer 1

当您将

DialogTitle

放在

DialogContent

旁边时，它会移除

DialogContent

的顶部填充：

要解决此问题，您可以通过向

DialogContent

添加额外的顶部填充来覆盖它：

<DialogContent style={{ paddingTop: 16 }}>