es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cambiar el color de fondo del TextField (MUI) cuando haya datos presentes.

31 Jul, 2023 Programación

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.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    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:

    const [valor, setValor] = useState('');

    Luego, pasemos los estados valor y setValor al componente TextField como props:

    <textfield value="{valor}" onchange="{(evento)" ==""> setValor(evento.target.value)}
  ...
/>

    Ahora, usando la propiedad inputProps, podemos agregar una clase al elemento de entrada de TextField en función de su valor:

    <textfield value="{valor}" onchange="{(evento)" ==""> setValor(evento.target.value)}
  inputProps={{
    className: valor ? 'fondo-blanco' : 'fondo-gris'
  }}
  ...
/>

    En el ejemplo anterior, si valor tiene un valor verdadero (contiene datos), el elemento de entrada tendrá una clase de fondo-blanco. De lo contrario, tendrá una clase de fondo-gris.

    Con las clases definidas, ahora podemos usarlas para dar estilo a TextField utilizando styled-components:

    const ContenedorTextField = styled(TextField)`
  & .MuiInputBase-root {
    height: 40px;
    &.fondo-blanco {
      background-color: #fff;
    }
    &.fondo-gris {
      background-color: ${({ theme }) => theme.palette.background.grey01};
    }
  }
`;

    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 clase MuiInputBase-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 estado valor.

    Con esta configuración, el TextField tendrá un fondo blanco cuando se haya ingresado información y un fondo gris cuando esté vacío.

Comments are closed.