0
319
ViewsReaccionar: la etiqueta del material no está en la posición correcta en el campo de texto
Traté de crear el campo de texto MUI usando el mismo código en Codesandbox pero todo funciona bien.
Intenté seguir esta publicación pero no funcionó.
¿Alguien puede darme algunas ideas de cómo solucionar este problema? 
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> ) Actualizado 1
Después de agregar la clase css a continuación, cambió a una interfaz de usuario más buena 
.MuiInputLabel-outlined.MuiInputLabel-shrink { transform: translate(0, -6px); font-size: 12px; margin: 0 14px; background-color: white; } Lo que quiero es algo como esto, al menos la etiqueta está en la posición correcta: 
·
Juan Pablo Isaza
1 answers
Answer question0
¡makeStyle está obsoleto en Mui-v5!
puede cambiar el borde de textFiled y otras propiedades de varias maneras, como:
- el accesorio sx:
<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 }} />- Forma de componente de estilo Mui (usando la emoción)
import { styled } from '@mui/material/styles' import TextField from '@mui/material/TextField' export const StyledTextField = styled(TextField)(() => ({ '& .MuiInputBase-root': { borderRadius: 20 } }))
·
Juan Pablo Isaza
Report
Answer question