材料-UI文本区域变式的标签的引人注目的通过值

Question 1

我正尝试使用 TextField 组件，从材料的用户界面与所概述的变型，但由于某些原因标签直接通过价值？我如何能解决这个问题？

我重放它在下面codesandbox.io：

https://codesandbox.io/s/angry-borg-2ojel?file=/src/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>
  );
}

包。json

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

Question 2

添加 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>
  );
}

Martin Devillers · Answer 1 · 2021-11-24T02:42:16

添加 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>
  );
}

材料-UI文本区域变式的标签的引人注目的通过值

的问题

应用程序。多伦多证券交易所

包。json

最好的答案

其他语言

此页面有其他语言版本

受欢迎的此类别

流行的问题，在这个类别