Styling in React
Tags: react, javascript, css, webdev
Published: 2020-05-05 07:08:32

Hi Dev 👋, Thanks for opening my blog. I hope you are doing well and ready to learn about **Styling in React** 😎.

We can add styling to *React Component* in 4 ways:

1. Inline Styling
2. CSS-in-JS Libraries
3. CSS & CSS Pre-processors
4. CSS Module

So, let's start!!

*1. Inline Styling*

Inline styles are nothing new, they're a HTML feature that we've all most likely used at some point. However implementing inline styles in React are little different, we store the CSS in object as key/value pair.

```javascript

// Inline object defination
<div style={{ backgroundColor: "grren" }}> I am a Div </div>;

// Object literal defination
const divStyle = { backgroundColor: "green" };

<div style={divStyle}> I am a Div </div>;
```

Inline style are mostly used when applying conditional styles, they are often not the best choice when more than one element requires same styling.

*2. CSS-in-JS Libraries*

CSS-in-JS and inline styles are extremely similar. However, with inline styles React attaches the styles to the DOM nodes, whereas CSS-in-JS libraries take your styles and inject them into a `<style>` tag in the DOM.

First you need to install CSS-in-JS Library i.e styled-components

` npm install --save styled-components `

```javascript
// Import styled-components
import styled from "styled-components";

// Declaring the styles
const Title = styled.h1`
    font-size: 1.6em;
    color: green;
    text-align: center
`;

// Regular JSX Component tag
<Title>
    Hello World!
</Title>
```

You can also declare the styles in separate file and then imported in.

 
*3. CSS & CSS Pre-processors*

The process of using vanilla CSS or CSS pre-processors is the same in React, there are couple of notable differences. When applying classes to elements, we use the **className** syntax rather than **class**. We also link our stylesheet using `@import` syntax.

```javascript
import React from "react";

// Import CSS or SCSS file
import "./App.css";

const App = () => {
  return <h1 className="title">Hello World!</h1>;
};
```

Define the styles for `.title` class in `App.css` file. We can use one global `CSS/Sass` file or we can split our stylesheet up into components.

```css
    /* In App.css */
      .title {
        font-size: 1.6em;
        color: green;
        text-align: center;
      }
```

*4. CSS Module*

CSS Module are simply `.css` files in which all the CSS styles and animations are defined. With an exception, all of the styles declared are locally scoped to the Component they are imported into.

```javascript
import React from "react";
import style from "./title.css";

const Title = () => {
  return <h1 className={style.title}>Hello World!</h1>;
};

export default Title;
```
Refer to each CSS style using `.` notation. Define the styles for `.title` class in `title.css`. All CSS styles for one component are declared in one file

```css
    /* In title.css */
      .title {
        font-size: 1.6em;
        color: green;
        text-align: center;
      }
```

That's It 😎.

Thanks for reading! My name is Shoaib Sayyed; I love helping people to learn new skills 😊. You can follow me on [Twitter](https://twitter.com/shoaib0311) if you’d like to be notified about new articles and resources.