Styling in React

#react #javascript #css #webdev

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:

Inline Styling
CSS-in-JS Libraries
CSS & CSS Pre-processors
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.


// 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

// 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.

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.

    /* 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.

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

    /* 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 if you’d like to be notified about new articles and resources.