# The Digest Guide to React Styling

---
title: The Digest Guide to React Styling
published: true
description: Notes from understanding React Styling
tags: React,CSS,CSS-in-js,css-modules 
cover_image: https://thepracticaldev.s3.amazonaws.com/i/rbgzk6dc1bdody83ngqt.png
---

Are you confused over the different styling approaches for components in React? So am I. 
To avoid verbosity, I summed it up in 5 bullet points and 4 images, with some footnotes. 
Use this article as a starting point for exploring deeper with a basic understanding of how each method works. 

## CSS in the DOM

Here is how you can add styles to a web page:

### External stylesheet 
```
<link rel="stylesheet" type="text/css" href="mystyle.css">
```
The styles are global and applied on the whole DOM

### Embedded (internal) stylesheet: 

```
<style>
   p {
        font-family: georgia, serif; 
        font-size: x-small;
    }
</style>
```
Also here, the styles are global and applied on the whole DOM

### Inline styles
```
<h1 style="color:blue;">This is a Blue Heading</h1>
```
The style is local and impacts only the element

### Scoped CSS - deprecated! 
https://caniuse.com/#feat=style-scoped

### Shadow DOM CSS
It is a style tag that only applied to the shadow DOM part where it is included. 

## CSS in React

Let's see how React styles are translated to the above (internal and external stylesheet and inline styles): 
General note: Any .CSS file bellow can also be a CSS with pre-processor such as Less or Scss file. 

### Basic Styling

**With styles**

![Alt Text](https://cdn.hashnode.com/res/hashnode/image/upload/v1714681283865/2cbe81a1-8b91-49e2-b639-70d141c4b4fc.png)

**With classes**
![Alt Text](https://cdn.hashnode.com/res/hashnode/image/upload/v1714681285133/50a35857-704f-4631-aa73-b6b15673587d.png)

- Styling is processed during build time. 
- Styles can be exported to an external stylesheet. 
- Dynamic styling can be achieved using changing inline styles or applying dynamic classes. 

### CSS Modules

![Alt Text](https://cdn.hashnode.com/res/hashnode/image/upload/v1714681286403/44431bfe-e0d3-4f6a-b66b-ac1a5e603a01.png)

- Styles are created during build time (Webpack)
- Styles can be exported to an external stylesheet.
- In Create-React-App CSS modules are differentiated from regular CSS by adding the `.module.css` suffix to the files. Webpack configuration in CRA refers to this suffix. 

### CSS in JS

![Alt Text](https://cdn.hashnode.com/res/hashnode/image/upload/v1714681287522/061c6350-7589-462a-aded-06eb18dea165.png)

- Styles are created during runtime. 
- Some libraries allow extracting static CSS parts to external CSS stylesheet (critical CSS). 
- In CSS in JS JS objects are playing the role of classes.