Material-UI TextField 变体标签通过值突出答案

【问题标题】：Material-UI TextField variant label striking through valueMaterial-UI TextField 变体标签通过值突出
【发布时间】：2022-01-02 11:42:19
【问题描述】：

我正在尝试将 Material-UI 中的 TextField 组件与概述的变体一起使用，但由于某种原因，标签直接通过值？我该如何解决这个问题？

Screenshot of TextField with label and value mixed up

我在下面的codesandbox.io中复制了它：

https://codesandbox.io/s/angry-borg-2ojel?file=/src/App.tsx

App.tsx

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

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

package.json

    "@material-ui/core": "4.12.3",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-scripts": "4.0.3"

【问题讨论】：

奇怪你提供的代码框渲染得很好。你用的是什么浏览器？
Windows 上的最新版 Chrome
您可以将 TextField 拆分为 InputLabel 和 OutlinedLabel。您提供的代码框也适合我。

标签： reactjs typescript material-ui

【解决方案1】：

添加InputLabelProps={{ shrink: true }} 以强制TextField 控件的“收缩”状态，在这种情况下，该控件应将标签呈现在字段的轮廓上。

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 }}/>
    </div>
  );
}

【讨论】：