How to Set Text Color in ReactJS ?

React provides you 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. A foundational aspect of styling revolve­s around modifying text color. In this article, we will see various techniques to effectively set te­xt color in React applications.

Prerequisites:

• Introduction to React
• React Hooks
• NPM or Yarn

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.

Javascript

// App.js
import React from 'react';
import './style.css'; // Import the CSS file
const App = () => {
    return(
        <div className=container
            <h1 className="heading">
                Geeksforgeeks
            </h1>
            <div className="text-color">
                A Computer Science portal for
                geeks. 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:

npm start

Output:

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.

Example:

App.js

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}>
                Geeksforgeeks
            </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 geeks.
                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