How to Set Text Color in ReactJS ?
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"> w3wiki </h1> <div className="text-color"> A Computer Science portal for Beginner. 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 : 3 rem; 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:
Approach 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}> w3wiki </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 Beginner. It contains well written, well thought and well explained computer science and programming articles. </div> </div> ); }; export default App; |
Output:
Contact Us