Cambiar el estilo CSS con el evento React onClick()

Trabajar en el estilo es una de las principales tareas al crear sitios web. Una y otra vez tenemos que manipular el estilo CSS para brindar una mejor apariencia a la aplicación que estamos construyendo. Entonces, en este artículo, veremos cómo podemos cambiar el estilo CSS usando React. Específicamente, veremos cómo un evento (onClick) puede cambiar el estilo CSS. Aquí, usaremos ganchos React para implementar la declaración del problema. Los ganchos de reacción ayudan a administrar el estado de los componentes funcionales.

Enfoque: la introducción de ganchos React es importante cuando se trabaja con componentes funcionales. Hace que la gestión del estado sea mucho más fácil en React Lifecycle. Además, es mucho más fácil y usa menos código al construir componentes. Por lo tanto, aprovecharemos la funcionalidad de los ganchos de React para implementar la declaración de nuestro problema. Aquí, crearemos una pequeña aplicación para entender el concepto. Entonces, básicamente, cambiaremos el color de fondo de un contenedor haciendo uso del evento onClick(). Definiremos inicialmente el CSS para nuestra aplicación. Una vez que un usuario hace clic en el botón, el color de fondo cambia al cambiar el estado. El principio de los ganchos React nos facilitará las cosas.

Ahora, comencemos con la estructura de archivos y la parte de codificación.

Creación de la aplicación React:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app appname

Asegúrese de que el nombre de la aplicación comience con letras minúsculas.

Paso 2: Después de crear la carpeta de su proyecto. Ahora, salta a la carpeta respectiva haciendo uso del siguiente comando:

cd appname

Estructura del proyecto: ahora, la estructura del archivo se verá así:

Nuestra estructura de archivo de aplicación

Paso 3: en la estructura de archivos anterior, solo usaremos archivos App.js y App.css . Primero proporcionemos el estilo CSS para nuestra aplicación. Todo el código CSS debe escribirse dentro del archivo App.css . Copie el código mencionado a continuación en el archivo App.css.

.App {
  font-family: sans-serif;
  text-align: center;
  background-color: aqua;
}
.cont {
  width: 250px;
  height: 250px;
  margin-top: 50px;
  margin-left: 150px;
  background-color: violet;
}
.button {
  border-radius: 8px;
  font-size: 20px;
  background-color: red;
  color: white;
  margin-left: 70px;
  margin-top: 100px;
}
.cont2 {
  width: 250px;
  height: 250px;
  margin-top: 50px;
  margin-left: 150px;
  background-color: yellow;
}

Paso 4: ahora, comencemos a implementar el enfoque de ganchos React en el archivo App.js. En el código anterior, establecemos el valor de estado inicial (estilo) como la string. Este valor es el nombre de clase que usaremos dentro del Botón. Inicialmente, el valor se define como cont para el cual se define el estilo CSS en nuestro archivo App.css. Proporcionamos este valor de estado al className del botón.

Ahora, el siguiente paso es definir el controlador onClick para el botón. Entonces, changeStyle es el controlador de botones. Para cambiar el valor del estado, definimos nuestro valor setState que es setStyle en nuestro caso. Esto se activa dentro del changeStyle. Entonces, una vez que hacemos clic en el botón, se ejecuta changeStyle, que además ejecuta setStyle para cambiar el estado, es decir, cont2.

import React, { useState } from "react";
import "./App.css";
const App = () => {
  const [style, setStyle] = useState("cont");
  
  const changeStyle = () => {
    console.log("you just clicked");
  
    setStyle("cont2");
  };
  return (
    <>
      <div className="App">CHANGE CSS STYLING WITH ONCLICK EVENT</div>
      <div className={style}>
        <button className="button" onClick={changeStyle}>
          Click me!
        </button>
      </div>
    </>
  );
};
export default App;

Paso 5: Ejecute el código haciendo uso del siguiente comando:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/, verá la siguiente salida. Después, haga clic en el color de fondo cambia a amarillo.

El color de fondo cambió al hacer clic en el botón.