0
219
Views¿Mostrar imagen al comienzo de TextField material-ui y no a ningún lado?
¿Cómo mostraría una imagen dentro de un TextField como si fuera parte del texto, como un InputAdornment, pero no a ambos lados, sino al principio del TextField? 
y no al lado como un icono al lado del área de entrada de texto que es lo que hace InputAdornment (por ejemplo, no como un icono de búsqueda al lado de un campo de consulta)?
La única forma en que puedo pensar es simplemente colocar la imagen sobre TextField, pero descubrí que esto no hacía obvio que la imagen es parte de la entrada.
Revisé la documentación, pero no parece haber una forma obvia de lograr esto.
¡Muchas gracias de antemano!
2 answers
Answer question0
Los comentarios sobre su pregunta son parcialmente correctos. No puede editar razonablemente el <input> real sin perder la funcionalidad, pero el componente Textfield no es solo un <input> y está compuesto por múltiples elementos que pueden contener/mostrar una imagen.
Dado que no se especificó ninguna versión de MUI, asumiré que está utilizando la última. (Esto también se puede lograr con MUI 4 TextField utilizando la antigua función makeStyles ).
Puede cambiar la ubicación de TextField startAdornment con algunos cambios en el CSS subyacente. Esencialmente, puede cambiar la flex-direction predeterminada de row a column y luego ajustar las canaletas a su gusto:
<TextField id="input-with-icon-textfield" label="TextField" variant="outlined" sx={{ ".MuiOutlinedInput-root": { paddingTop: "1rem", flexDirection: "column" }, img: { paddingRight: "1rem" } }} InputProps={{ startAdornment: <img src="https://via.placeholder.com/180x150/200" /> }} placeholder="Enter image caption..." />Lo que produce esto:
Ejemplo de trabajo: https://codesandbox.io/s/inputwithicon-material-demo-forked-tyx7y?file=/demo.js:139-580
0
Puede seleccionar el elemento de entrada nativo producido por la biblioteca y colocar una imagen de fondo en él. Luego definiría una background-position-(x|y) para ajustar la ubicación de la imagen. Para modificar la posición del texto en consecuencia, movería el cursor dentro del campo especificando la propiedad de padding o text-indent .
Debajo de las posiciones de fondo 5px 6px para la colocación de x e y se establece al final de la propiedad de background respectivamente.
input[type='text'][class^='MuiInput'] { background: url(https://dummyimage.com/20/00ff00/000) no-repeat 5px 6px; padding-left: 10px; /* or */ text-indent: 10px; }