Materiał-Etykieta opcji pola tekstowego interfejsu użytkownika, podkreślając znaczenie

Question 1

Staram się używać TextField składnik Material UI z opisanym rozwiązaniem, ale z jakiegoś powodu etykieta biegnie przez wartość? Jak mogę to naprawić?

Zrzut ekranu pola tekstowego z перепутанными symbolem i wartością

Właśnie odtworzyłem go poniżej codesandbox.io:

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

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

pakiet.json

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

Question 2

Dodać InputLabelProps={{ shrink: true }} aby wymusić "wycisnąć" stan TextField element sterujący, który w tym przypadku powinien wyświetlać etykietę na obwodzie pola.

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

Dodać InputLabelProps={{ shrink: true }} aby wymusić "wycisnąć" stan TextField element sterujący, który w tym przypadku powinien wyświetlać etykietę na obwodzie pola.

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

Materiał-Etykieta opcji pola tekstowego interfejsu użytkownika, podkreślając znaczenie

Pytanie

Aplikacja.tsx

pakiet.json

Najlepsza odpowiedź

W innych językach

Ta strona jest w innych językach

Popularne w tej kategorii

Najczęściej zadawane pytania w tej kategorii