Matériel-UI TextField variante de l'étiquette de la frappe dans la valeur

Question 1

Je suis en train d'utiliser TextField composant de Matériau de l'INTERFACE utilisateur avec la variante décrite, mais pour une raison quelconque, le label va droit au travers de la valeur? Comment puis-je résoudre ce problème?

Capture d'écran de Champ de texte avec l'étiquette et la valeur mélangé

J'ai reproduit ci-dessous 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"

Question 2

Ajouter InputLabelProps={{ shrink: true }} à force de le "réduire" à l'état d'un TextField de contrôle, qui dans ce cas devrait rendre l'étiquette sur le contour du domaine.

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

Ajouter InputLabelProps={{ shrink: true }} à force de le "réduire" à l'état d'un TextField de contrôle, qui dans ce cas devrait rendre l'étiquette sur le contour du domaine.

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

Matériel-UI TextField variante de l'étiquette de la frappe dans la valeur

La question

App.tsx

package.json

La meilleure réponse

Dans d'autres langues

Cette page est dans d'autres langues

Populaires dans cette catégorie

Questions populaires dans cette catégorie