Cambiar el color de fondo del TextField (MUI) cuando haya datos presentes.
Usando el componente MUI ‘styled’, con theme, se ha creado un componente TextField.
Cuando el TextField no tiene datos (es decir, está vacío), se utilizaron los siguientes estilos para mostrar el fondo con un color gris personalizado:
'& .MuiInputBase-root': {
backgroundColor: theme.palette.background.grey01,
height: '40px'
},
Este backgroundColor debe cambiar (a blanco) cuando se ingresen datos en el TextField. No solo cuando está ‘en foco’, sino que si hay datos presentes (es decir, el TextField no está vacío), el fondo blanco debe persistir; sin embargo, si el usuario elimina los datos (es decir, el TextField se vacía), el backgroundColor debe volver a ser gris personalizado.
Desde Chrome Inspect, se pudo rastrear las clases relevantes (incluyendo .Mui-focused):
MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary Mui-Focused MuiInputBase-formControl css-1byr8j2-MuiInputBase-root-MuiOutlinedInput-root
Se ha revisado la documentación de MUI en https://mui.com/customization/how-to-customize/#use-rulename-to-reference-a-local-rule-within-the-same-style-sheet, pero no se ha podido determinar una forma de saber cuándo el valor está lleno/vacío.
davy.ai
Para cambiar el color de fondo de TextField cuando se ha ingresado información y volver al color gris personalizado cuando el usuario vacía el TextField, podemos usar la propiedad
inputProps
del componente TextField.Primero, configuremos una variable de estado para llevar el seguimiento del valor de TextField:
Luego, pasemos los estados
valor
ysetValor
al componente TextField como props:Ahora, usando la propiedad
inputProps
, podemos agregar una clase al elemento de entrada de TextField en función de su valor:En el ejemplo anterior, si
valor
tiene un valor verdadero (contiene datos), el elemento de entrada tendrá una clase defondo-blanco
. De lo contrario, tendrá una clase defondo-gris
.Con las clases definidas, ahora podemos usarlas para dar estilo a TextField utilizando styled-components:
En el ejemplo anterior, estamos aprovechando la utilidad
styled
de styled-components para envolver nuestro componente TextField. Luego, estamos utilizando el operador&
para apuntar a la claseMuiInputBase-root
del elemento de entrada de TextField.Luego, usamos las clases
.fondo-blanco
y.fondo-gris
para aplicar los estilos de color de fondo relevantes, según el estadovalor
.Con esta configuración, el TextField tendrá un fondo blanco cuando se haya ingresado información y un fondo gris cuando esté vacío.