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’ ” .

Profile.css

.Profile{
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 .
Profile.js
import React , { Component } from "react";
import './Profile.css'
class Profile extends Component {
render(){
return<p className="Profile"> highest education is {this.props.education} 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 }

 

User.js

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

 

Leave a Reply

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

9 + 1 =