Styling in React-JS

In this blog, we are going to learn how to style components in React-JS

There are 4 ways to style a component:

1. Inline style:

we can directly style an element using inline-style attributes

<h3 style={{ color: "Yellow" }}>This is a heading</h3>

2. Using javascript object:

We can make a separate JavaScript object and set the desired style properties. This object can be used as the value of the inline style attributes.

const styles= {
   color: "red",
   fontSize: "25px"
 };
<h3 style={this.styles}>This is a heading</h3>

3. CSS Stylesheet: 

We can make a separate CSS file and write all the styles for the component inside that file. This file needs to be imported into the component file.

import './style.css';

4. CSS Modules: 

We can create a separate CSS module and import this module inside our component. Create a file with “.module.css”‘ extension,

ex:- styles.module.css

import styles from  './styles.module.css';
<p className={styles.paragraph} >This is a paragraph</p>