How to Set Text Color in ReactJS ?
Last Updated :
28 Apr, 2025
React provides you the ability to create interactive and dynamic user interfaces. Within these interfaces, the choice of text color holds significant importance as it enhances the visual appeal and engagement for users. A foundational aspect of styling revolves around modifying text color. In this article, we will see various techniques to effectively set text color in React applications.
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 method involves the utilization of traditional CSS and JavaScript to establish a predetermined text color. This is achieved by developing a React component that is linked to a specific CSS class.
Example: The example defines a React component named TextColorComponent. This component applies CSS styling by importing a style.css file. It creates a visually appealing centered container featuring a vibrant green heading and a crimson-colored text block below 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;
/* 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 1Approach 2: Dynamic Color Change
In the second approach, interactivity is introduced to manipulate text color. By utilizing React's state management, a button enables users to toggle between black and green 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
Similar Reads
How to Make Text Blink in ReactJS ? In this article, we are going to learn about making a text blink in React. Making text blink in React refers to the process of creating a visual effect where text repeatedly alternates between being visible and invisible, creating a flashing or blinking appearance, often achieved through CSS animati
3 min read
How to create Bold Specific Text In React JS ? ReactJS has eÂmerged as one of the most widely adopted JavaScript libraries for deÂsigning user interfaces. TheÂy often encounter scenarios that demand speÂcialized text styling capabilities. This includeÂs the need to eÂmphasize certain words or phrases by applying bold formatting. In this article
3 min read
How to use styles in ReactJS ? React is a popular JavaScript library for building single-page applications (SPAs) with dynamic user interfaces. Styling in React can be done in various ways, each with its advantages. In this article, we will explore different approaches to applying styles in React, including inline styles, CSS fil
4 min read
How to Set Text Color in RGBA in Tailwind CSS ? In this article, we will change the color of text to rgba(0, 0, 0, 0.54) which is an RGB color format with an added parameter alpha that tells the opacity of the color. In this article, we are going to learn how we can achieve the text color of rgba(0, 0, 0, 0.54) in Tailwind CSS and hence, change t
3 min read
How to set a Global Font Family in ReactJS ? In React Setting a global font family means defining a specific font style to be used throughout a website or application, ensuring consistent typography across all elements and text content. When seÂtting a global font family, developers speÂcify a single font that will be universally applieÂd acro
5 min read