In this article, we will see various techniques to effectively set text color in React applications. React, a widely recognized JavaScript library, provides developers with 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. Styling plays a central role in web development whereby it significantly influences the overall aesthetics and user experience of applications. A foundational aspect of styling revolves around modifying text color.
Prerequisites:
- Introduction to React
- React Hooks
- NPM or NPX
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.
- 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
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. This interaction triggers dynamic changes 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 `useState` hook, the component effectively manages a state that toggles between black and red when a button is clicked. Additionally, the component’s aesthetics are enhanced through inline styles defined in a JavaScript object called `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
