I am trying to use TextField
component from Material-UI with the outlined variant, but for some reason the label goes straight through the value? How can I fix this?
Screenshot of TextField with label and value mixed up
I reproduced it in below 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"
CodePudding user response:
Add InputLabelProps={{ shrink: true }}
to force the "shrink" state of a TextField
control, which in this case should render the label on the outline of the field.
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>
);
}