0
327
VistasReact - Material label not in right position in Textfield
I tried create the MUI textfield using same code in Codesandbox but everything works fine.
I tried to follow this post but not working
Can anyone give me some ideas of how to fix this issue?
const textfieldUseStyles = makeStyles((theme) => ({
root: {
"& > *": {
margin: "auto",
width: "100%",
},
},
}));
...
const textFieldClasses = textfieldUseStyles();
return (
<form className={textFieldClasses.root}>
<TextField
key="Confirmation Code"
variant="outlined"
id="email"
label="Post title"
name="email"
autoComplete="confirmation code"
value="123"
InputLabelProps={{ shrink: true }}
/>
</form>
)
Updated 1
After I added css class below, it changed to more good UI
.MuiInputLabel-outlined.MuiInputLabel-shrink {
transform: translate(0, -6px);
font-size: 12px;
margin: 0 14px;
background-color: white;
}
What I want is something like this, at least the label is in right position:
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
makeStyle is deprecated in Mui-v5 !!!
you can change textFiled border and other properties in various ways like:
- the sx prop:
<TextField
sx={{ '& .MuiOutlinedInput-root': { borderRadius: '20px' } }} // change border form here
key="Confirmation Code"
variant="outlined"
id="email"
label="Post title"
name="email"
autoComplete="confirmation code"
value="123"
InputLabelProps={{ shrink: true }}
/>
- Mui styled component way(using emotion)
import { styled } from '@mui/material/styles'
import TextField from '@mui/material/TextField'
export const StyledTextField = styled(TextField)(() => ({
'& .MuiInputBase-root': {
borderRadius: 20
}
}))
·
Juan Pablo Isaza
Denunciar
Responde la pregunta