How to change paragraph color in react js?

Hi Friends 👋,

Welcome To aHoisting!

To change paragraph color in react js, you can set color: blue; in .blue-text. It will change paragraph color in react js.

Today, I am going to show you, how to change paragraph color in react js.

Table of contents

• Install and create a new React app.
• Import react component.
• Create a Component.

Let’s start with the first step.

Step 1: Install and create a new React app.

First you have to install the React project. You should use create-react-app command to create a new React project.

npx create-react-app my-app
cd my-app
npm start

Step 2: Import react component.

After installing, you have to import your React component.

import React from 'react';
import './App.css';

Step 3: Create a Component.

You can use className="blue-text" to change paragraph color in react js.

<div>
  <p className="blue-text">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
</div>

Change paragraph color example.

The below code is an example of a React. You have to import './App.css' and set color: blue; in .blue-text to change paragraph color in react js.

App.js

import React from 'react';
import './App.css';

function App() {
  return (
    <div>
      <p className="blue-text">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
    </div>
  );
}

export default App;

App.css

.blue-text {
  color: blue;
}

In the above code example, I have used the color: blue; to change paragraph color in react js.

Check the output of the above code.

All the best 👍