Материал-Метка варианта текстового поля пользовательского интерфейса, подчеркивающая значение

Question 1

Я пытаюсь использовать TextField компонент из Material-UI с описанным вариантом, но по какой-то причине метка проходит прямо через значение? Как я могу это исправить?

Снимок экрана текстового поля с перепутанными меткой и значением

Я воспроизвел его ниже codesandbox.io:

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

Приложение.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>
  );
}

Материал-Метка варианта текстового поля пользовательского интерфейса, подчеркивающая значение

Вопрос

Приложение.tsx

пакет.json

Лучший ответ

На других языках

Эта страница на других языках

Популярное в этой категории

Популярные вопросы в этой категории