How to Use CSS in React Js

If you are creating a project then you will need to style its components for looking user-friendly & attractive. So, You have to learn How to use CSS in react js

you will learn to design your web application using static & dynamic styling . Means that, you can define a static styling properties that never change while fires an event.

If you need to change styling properties while fires events like onClick, onMouseOver, keyPress , onLoad & more then you can define dynamic styling.

There are many ways to use CSS in React app. But here only four important & useful ways like inline style, external style, & CSS module style are explained. You can use them according to your project requirement.

Before learning it, you should have well understanding of these topics

Create React App Project

React Props with Example

React State with Example

React Event Handling step by step

React Stylesheet

You can use CSS by using these three useful stylesheets –

• Inline Stylesheet
• External Stylesheet
• CSS module Style

Inline Stylesheet

Inline stylesheet is create as an object with CSS properties in camelCase within a specific component and assign it to the style attribute of react elements

You can use the Inline stylesheet using the style attribute directly to the react element. But You will have to assign CSS properties to the style the in the form of a javascript object within curly brackets.

If you need to add some css properties to react elements of a particular component, then you should use inline css style.

In case of React Inline Style, You will have to convert default CSS properties into camelCase and their values within a single or double quotes like –

Syntax –

You can declare css properties as an object direclty to the style attribute

<tagName style={{backgroundColor:"red"}}> 

You can also assign object of css properties to a variable. then you have to assign this variable to the style attribute

keyword variableName = {
 propertyName1: "value1",
 propertyName2: "value2",
 propertyName3: "value3",
 propertyNamen: "valuen"
};

then assign variableName to the style attribute –

<tagName style = {variableName}

Example –

If you need to add css properties with a single object directly to the react element –

function Welcome(){
 render(){
  return <h1 style ={{color:"white", backgroundColor:blue; fontSize:35px"}}> Welcome to CodingStatus</h1>
 }
}

If you need to add css properties with a single object that is assigned to a variable –

function Welcome(){

 render(){
 h1style = {
   color:"white", 
   backgroundColor:blue;
   fontSize:35px"
 };
  return <h1 style ={h1style}> Welcome to CodingStatus</h1>
 }
}

If you need to add css properties with multiple objects that is assigned to variables –

function Welcome(){
 render(){
 h1style1 = {
   color:"white", 
   backgroundColor:blue;
   fontSize:35px"
 };
 h1style2 = {
   color:"white", 
   backgroundColor:blue;
   fontSize:35px"
 };
  return <h1 style ={{...h1style1, ...h1style2}}> Welcome to CodingStatus</h1>
 }
}

External Stylesheet

An External Stylesheet is an external file that is created with the .css extension by writing normal CSS properties and this file can be used in multiple component files by using the import keyword.

App.css

h1 = {
   color:"white", 
   background-color:blue;
   font-size:35px"
 };

App.js

import "./App.css"
function Welcome(){
 render(){
  return <h1> Welcome to CodingStatus</h1>
 }
}

If You need to use multiple classes with different css properties in external css stylesheet, then –

File Name – Style.css

.title1{
  color:blue;
}
.title2{
  font-size:35px;
}

File Name – App.js

import "./Style.css"
function Welcome(){
 render(){
  return <h1 className="title1 title2"> Welcome to CodingStatus</h1>
 }
}

CSS Module Stylesheet

CSS Module stylesheet is an external file that should be created with .module.css extension by writing normal CSS properties and It can be imported in multiple component files using the import keyword.

Syntax –

import anyName from "./css-module-stylesheet-path"

If an external CSS file contains multiple selectors with different CSS properties and you need to use CSS properties of specific selectors, then you have to create css module stylesheet.

Example –

File Name – Style.module.css

h1{
 font-weight:normal;
}
.title1{
  font-size:28px;
  color:red;
}
.title2{
 background-color:green;
 color:white;
}

File Name – App.js

import styles "./Style.module.css"
function Welcome(){
 render(){
  return <h1 className={styles.title2}> Welcome to CodingStatus</h1>
 }
}