Material-UI TextField variante rótulo de impressionante valor através de

Question 1

Estou tentando usar TextField componente Material-INTERFACE com o descrito variante, mas por algum motivo, o rótulo vai direto através do valor? Como posso corrigir isso?

Screenshot do TextField com etiqueta e valor misturados

Eu reproduzimos abaixo codesandbox.e / s:

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

pacote.json

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

Question 2

Adicionar InputLabelProps={{ shrink: true }} para forçar a "encolher" o estado de um TextField de controle, que neste caso, deve compor a etiqueta no contorno do campo.

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

Adicionar InputLabelProps={{ shrink: true }} para forçar a "encolher" o estado de um TextField de controle, que neste caso, deve compor a etiqueta no contorno do campo.

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

Material-UI TextField variante rótulo de impressionante valor através de

Pergunta

App.tsx

pacote.json

Melhor resposta

Em outros idiomas

Esta página está em outros idiomas

Popular nesta categoria

Perguntas populares nesta categoria