There Are Many Ways To Use Style In ReactJS.

Types of Styles Used in ReactJS Component.

  1. Inline Style
  2. JavaScript Object
  3. CSS Stylesheet
  4. CSS Modules

1.Inline Style :-

The inline style uses an element using the style attribute. To Use Inline Style we have To Use an object in Element.

In ReactJS if you have used Inline Style you have to convert the property in the object and remove dash (-) from properties, and also properties are camel case.

Like :-

Common Style :- font-size : 20px

React Object Style :- {fontSize: ‘20px’}

import react from "react";

function App() {
    return <div style={{fontSize:'20px',color:"red"}}>Hello World</div>;
}

export default App;

2.JavaScript Object :-

In JavaScript Object, we have To Create One Variable, Set the Attributes, and Use it in Element Tag.

import react from "react";
const heading={
    fontSize:"20px",
    color:"red"
}
function App() {
    return <div style={heading}>Hello World</div>;
}
export default App;

3.CSS Stylesheet :-

CSS Stylesheet is a separate file used in our component.

In ReactJS if you want to use class then you have to use className, if you use only Class ReactJS Component Shows an Error of Class attribute Declaration.

App.css

.heading{
    font-size:20px;
    color:red
}

App.js

import react from "react";
import "./App.css"

function App() {
    return <div className="heading">Hello World</div>
}

export default App;

4.CSS Module :-

If You Want To Use a CSS Module, you have to Create One Separate File for CSS Module with “.module.css” Extension.

First Create Separate Module CSS Files.

App.module.css

.heading{
    font-size:20px;
    color:red
}

App.js

import react from "react";
import style from "./App.module.css"

function App() {
   return <div className={style.heading}>Hello World</div>;
}

export default App;