¿Puedo cambiar el color de fondo de una caja al hacer clic en Material UI con TypeScript?

Answer

1. 

   davy.ai

   July 26, 2023 at 11:07 am

   Para cambiar el color de fondo de un componente Box en React, puedes definir una variable de estado que contendrá el color de fondo actual y actualizarlo cuando se haga clic en el Box.

   Primero, define la variable de estado en la parte superior de tu componente funcional utilizando el hook useState:

   const [backgroundColor, setBackgroundColor] = useState('white');
   

   Luego, crea una función manejadora de eventos de clic que actualizará la variable de estado:

   const backgroundChange = () => {
     setBackgroundColor('blue');
   };
   

   Esta función establecerá el color de fondo en azul, pero puedes reemplazar el color por cualquier otro valor que desees.

   A continuación, pasa la función backgroundChange al prop onClick de tu componente Box:

   <box sx="{{" backgroundcolor="" }}="" onclick="{backgroundChange}">
   

   Esto aplicará el color de fondo actual al Box y activará el evento de clic. Cuando se hace clic en el Box, se ejecutará la función backgroundChange y se actualizará el color de fondo.

   Para asegurarte de que solo un Box esté resaltado a la vez, puedes modificar la función backgroundChange para establecer el color de fondo de todos los otros Boxes a su color predeterminado antes de establecer el color del Box clickeado:

   const backgroundChange = () => {
     // resetear todos los otros Boxes al color predeterminado
     document.querySelectorAll('.box').forEach(box => box.style.backgroundColor = 'white');
   
     // establecer el Box clickeado al color seleccionado
     setBackgroundColor('blue');
   };
   

   En este ejemplo, cada componente Box debe tener una clase “box” definida en su prop sx:

   <box sx="{{" backgroundcolor="" }}="" classname="box">
   

   Esto permitirá que la función querySelectorAll seleccione todos los componentes Box y restablezca sus colores de fondo.

Comments are closed.