Materiale-UI TextField variante etichetta barrando il valore

Question 1

Sto cercando di utilizzare TextField componente Materiale-UI con il delineato variante, ma per qualche motivo l'etichetta va dritto attraverso il valore? Come posso risolvere questo problema?

Schermata di TextField con etichetta e valore mescolato

Ho riprodotto in seguito 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>
  );
}

pacchetto.json

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

Question 2

Aggiungere InputLabelProps={{ shrink: true }} a forza di "riduci" stato di TextField di controllo, che in questo caso dovrebbero rendere l'etichetta sul contorno del 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

Aggiungere InputLabelProps={{ shrink: true }} a forza di "riduci" stato di TextField di controllo, che in questo caso dovrebbero rendere l'etichetta sul contorno del 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>
  );
}

Materiale-UI TextField variante etichetta barrando il valore

Domanda

App.tsx

pacchetto.json

Migliore risposta

In altre lingue

Questa pagina è in altre lingue

Popolare in questa categoria

Domande popolari in questa categoria