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.jsimport React from 'react';import './style.css'; // Import the CSS fileconst App = () => { return( <div className=container <h1 className="heading"> w3wiki </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
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.
Contact Us