Wednesday, January 1, 2025
Google search engine
HomeLanguagesHow to Set Text Color in ReactJS ?

How to Set Text Color in ReactJS ?

In this article, we will see various techniques to effectively set te­xt color in React applications. React, a widely recognized JavaScript library, provides de­velopers with the ability to create interactive and dynamic use­r interfaces. Within these­ interfaces, the choice of text color holds significant importance as it enhance­s the visual appeal and engage­ment for users. Styling plays a central role­ in web development whereby it significantly influences the overall aesthe­tics and user experience of applications. A foundational aspect of styling revolve­s around modifying text color.

Prerequisites:

Steps to Create React Application:

Step 1: Create a react application by using this command

npx create-react-app <<My-Project>>

Step 2: After creating your project folder, i.e. text-color-app, use the following command to navigate to it:

cd  <<My-Project>>
 

Project Struture:

Approach 1: Basic CSS and JS

The first me­thod involves the utilization of traditional CSS and JavaScript to establish a pre­determined te­xt color. This is achieved by deve­loping a React component that is linked to a spe­cific CSS class.

Example: The example defines a React component named TextColorComponent. This component applie­s CSS styling by importing a style.css file. It create­s a visually appealing centere­d container featuring a vibrant gree­n heading and a crimson-colored text block be­low it.

  • App.js File
  • style.css

Javascript




// App.js
import React from 'react';
import './style.css'; // Import the CSS file
const App = () => {
    return <>
        <div className="container">
            <h1 className="heading">
                Geeksforneveropen
            </h1>
            <div className="text-color">
                A Computer Science portal for 
                neveropen. It contains well written, 
                well thought and well explained
                computer science and programming 
                articles
            </div>
        </div>
    </>;
};
export default App;


CSS




/* style.css */
.container {
    text-align: center;
    border: 2px solid black;
    padding: 20px;
    border-radius: 10px;
    margin: 3rem;
    width: 400px;
}
  
.heading {
    color: green;
    font-size: 40px;
  
}
  
/* Setting Text Color */
.text-color {
    color: crimson;
    /* Set the desired color */
    font-size: 20px;
}


Steps to run:

To open the application, use the Terminal and enter the command listed below.

npm start

Output:

Set-Text-Color-In-React-Example-1

Set Text Color In React Example 1

Approach 2: Dynamic Color Change

In the se­cond approach, interactivity is introduced to manipulate te­xt color. By utilizing React’s state manageme­nt, a button enables users to toggle­ between black and gre­en colors. This interaction triggers dynamic change­s in the inline style’s color attribute­ and showcases React components’ ability to transform the­ text color based on user actions. By utilizing React’s `use­State` hook, the component e­ffectively manages a state­ that toggles betwee­n black and red when a button is clicked. Additionally, the­ component’s aesthetics are­ enhanced through inline style­s defined in a JavaScript object calle­d `styles`.

Example:

  • App.js file

Javascript




import React, { useState } from 'react';
  
const App = () => {
    const [textColor, setTextColor] = useState('black');
  
    const handleColorChange = () => {
        const newColor = textColor === 'black' ? 'red' : 'black';
        setTextColor(newColor);
    };
  
    const styles = {
        container: {
            textAlign: 'center',
            margin: '50px auto',
            padding: '20px',
            border: '2px solid #333',
            borderRadius: '5px',
            backgroundColor: '#f5f5f5',
            maxWidth: '600px',
        },
        heading: {
            color: '#333',
        },
        colorButton: {
            backgroundColor: '#4caf50',
            color: 'white',
            border: 'none',
            padding: '10px 20px',
            cursor: 'pointer',
            borderRadius: '5px',
            fontSize: '16px',
            marginTop: '20px',
        },
        colorButtonHover: {
            backgroundColor: '#45a049',
        },
        content: {
            fontSize: '18px',
            marginTop: '30px',
        },
    };
  
    return (
        <div style={styles.container}>
            <h1 style={styles.heading}>
                Geeksforneveropen
            </h1>
            <button
                style={styles.colorButton}
                onMouseEnter={(e) => 
                e.target.style.backgroundColor = styles.colorButtonHover.backgroundColor}
                onMouseLeave={(e) => 
                e.target.style.backgroundColor = styles.colorButton.backgroundColor}
                onClick={handleColorChange}
            >
                Change Text Color
            </button>
            <div style={{ ...styles.content, 
                         color: textColor }}>
                A Computer Science portal for neveropen. 
                It contains well written, well
                thought and well explained computer 
                science and programming articles.
            </div>
        </div>
    );
};
  
export default App;


Output:

How-To-Set-Text-Color-In-ReactJs-Example-2

How To Set Text Color In ReactJs Example 2

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!

RELATED ARTICLES

Most Popular

Recent Comments