Material-UI outlined变体TextField标签穿透输入值如何修复？

问题原因 #

Material-UI v4的outlined变体TextField默认按照非受控组件逻辑处理标签上浮状态，如果你直接给value属性将其作为受控组件使用，但未绑定onChange事件，组件内部无法感知输入框已存在内容，就不会触发标签上浮的逻辑，最终出现标签和输入值重叠的问题。

解决方案 #

你可以根据你的使用场景选择下面任意一种方案修复：

• 方案1：用作受控组件时，补充onChange事件绑定

import { TextField } from "@material-ui/core";
import { useState } from "react";
import "./styles.css";

export default function App() {
  const [inputValue, setInputValue] = useState("Vest");
  return (
    <div className="App">
      <TextField 
        variant="outlined" 
        label="Label" 
        value={inputValue} 
        onChange={(e) => setInputValue(e.target.value)}
      />
    </div>
  );
}

• 方案2：仅需要设置初始值不需要受控时，用defaultValue替代value

import { TextField } from "@material-ui/core";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <TextField 
        variant="outlined" 
        label="Label" 
        defaultValue="Vest"
      />
    </div>
  );
}

• 方案3：特殊场景下（比如只读输入框）需要强制标签上浮，手动设置InputLabelProps.shrink为true

import { TextField } from "@material-ui/core";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <TextField 
        variant="outlined" 
        label="Label" 
        value="Vest"
        InputLabelProps={{ shrink: true }}
        readOnly
      />
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Kumar Venkata Uppala