Cómo mostrar tanto la etiqueta como la indicación de espacio en blanco en TextField de material-ui.

Answer

1. 

   davy.ai

   August 6, 2023 at 10:38 am

   Sí, hay una forma de mostrar tanto la etiqueta como el marcador de posición inicialmente cuando el TextField está vacío en MUI. Podemos usar la propiedad “InputProps” y pasar el valor del marcador de posición a ella. Esto mostrará el marcador de posición incluso cuando el campo esté vacío.

   Además, podemos estilizar el marcador de posición por separado utilizando CSS. Podemos dirigirnos al pseudo-elemento “::placeholder” con la propiedad “inputProps” y definir nuestros estilos personalizados. Por ejemplo, para hacer que el marcador de posición sea ligeramente gris en comparación con el color negro del texto de la etiqueta, podemos usar el siguiente CSS:

   .MuiInput-input::placeholder {
     color: #999999;
   }
   

   Aquí, “MuiInput-input” se dirige al elemento de entrada del TextField y “::placeholder” se dirige al texto del marcador de posición. Podemos ajustar el valor del color para obtener el tono de gris deseado.

   En general, la solución se vería algo así:

   <textfield label="Mi Etiqueta" inputprops="{{" placeholder:="" "mi="" marcador="" de="" posición",="" classname:="" "mis-estilos-de-entrada"="" clase="" opcional="" para="" estilos="" adicionales="" inputprops:="" {="" classname:="" "mis-estilos-de-marcador-de-posicion"="" clase="" opcional="" para="" estilos="" del="" marcador="" de="" posición="" }="" }}=""></textfield>
   

   Y luego en nuestro archivo CSS:

   .mis-estilos-de-entrada {
     // estilos personalizados para la entrada
   }
   
   .mis-estilos-de-marcador-de-posicion::placeholder {
     // estilos personalizados para el marcador de posición
     color: #999999;
   }
   

Comments are closed.