How to Add CSS in ReactJS

In that post we will learn how to include css in reactjs component .  Here we will  explain two ways for import css in component .

  1. CSS Stylesheet : In that way we will create a separate css file and write our css in that particular file then we could include this css file any component using  this statement “import ‘file-path/Profile.css’ ” .


color: red;
font-size: 20px;
Now we will create profile component Profile.js and include css file using import ‘./Profile.css’ . Then we can use class Profile with the help of className tag as below .
import React , { Component } from "react";
import './Profile.css'
class Profile extends Component {
return<p className="Profile"> highest education is {} and 
                 works as {this.props.job}</p>;
export default Profile;

2. Inline CSS : We will create User.js file and write css using const then we include this css varaible directly in div using style ={stylish variable name }



import React from ‘react’;
const myStyle = {
color :’blue’,
font :’5px’
const user = (props) =>{
return (
i am {} and my salary is {props.salary}
export default user;


Leave a Reply

Your email address will not be published. Required fields are marked *

45 − = 39