Working on styling is one of the major tasks while creating websites. Time and again we have to manipulate the CSS styling to provide a better appearance to the application we are building. So, In this article, we will see how we can change the CSS styling using React. Specifically, we will see how an event(onClick) can change the CSS styling. Here, we will be using React hooks to implement the problem statement. React hooks helps in managing the state of functional components.
Approach: The introduction of React hooks is significant while working with functional components. It makes the management of the state much easier in React Lifecycle. Additionally, it’s much easier and uses less code while building components. So, we will leverage the functionality of React hooks in order to implement our problem statement. Here, we will be creating a small app to understand the concept. So, basically, we will change the background color of a container by making use of the onClick() event. We will initially define the CSS for our app. Once a user clicks the button then the background color gets changed by changing the state. The principle of React hooks will make things easier for us.
Now, let’s get started with the file structure and coding part.
Creating React App:
Step 1: Create a React application using the following command:
npx create-react-app appname
Make sure that the app name is starting with lower-case letters.
Step 2: After creating your project folder. Now, jump into the respective folder by making use of the following command:
cd appname
Project Structure: Now, the file structure will look like the following:
Our app file Structure
Step 3: In the above file structure, we will only use App.js and App.css files. Let’s first provide the CSS styling for our app. All the CSS code must be written inside the App.css file. Copy the code mentioned below in the App.css file.
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; } |
Step 4: Now, Let’s start implementing the React hooks approach in the App.js file. In the above code, we set initial state(style) value as the string. This value is the className that we will be using inside the Button. Initially, the value is defined as cont for which the CSS styling is defined in our App.css file. We provide this state value to the className of the button.
Now, the next step is to define the onClick handler for the button. So, changeStyle is the button handler. In order to change the state value, we define our setState value which is setStyle in our case. This is triggered inside the changeStyle. So, once we click the button then changeStyle gets executed which further executes the setStyle to change the state i.e cont2.
App.js
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; |
Step 5: Run the code by making use of the following command:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output. After, Click the background color changes to yellow.
The Background color changed on clicking the Button.
