Materiál-UI TextField varianta štítku zarážející přes hodnotu

0

Otázka

Já se snažím používat TextField součást Materiál-UI s nastíněná varianta, ale z nějakého důvodu štítku jde přímo přes hodnoty? Jak mohu opravit toto?

Screenshot textového pole s popiskem a hodnota popletl

Jsem reprodukován v níže 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>
  );
}

balíček.json

    "@material-ui/core": "4.12.3",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-scripts": "4.0.3"
material-ui reactjs typescript
2021-11-24 02:23:10
1

Nejlepší odpověď

1

Přidat InputLabelProps={{ shrink: true }} vynutit "shrink" stavu TextField kontroly, které v tomto případě, by měla poskytnout štítek na obrys oblasti.

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>
  );
}
2021-11-24 02:42:16

V jiných jazycích

Tato stránka je v jiných jazycích

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................