The need to write CSS for particular components has been increasing drastically with the emergence of advanced component-based frontend frameworks. As a solution to the challenges faced in the frontend domain, tech-heads have come up with astonishing alternatives like Styled Component In React JS.

This article aims to target one such solution that is renowned by CSS-in-JS; however, amongst many CSS libraries, we will be discussing a specific one, i.e. Styled Component.

Now, the question arises- What are styled components? Read this article to know Styled components in detail and their importance in react js. 

What are Styled Components?

A styled component is a package in react js. By using this we can write actual CSS in our JavaScript file. It means we can use all the features of CSS like- Media query, pseudo-selectors, nesting, etc.

This is how we can create reusable components using styled components-

Setting up our project

At first, we need to create a project in react using the command-

npx create-react-app app-name
cd app-name
npm start

Now we need to install the styled component. This can be done by running the following command in react app directory-

with npm

npm install --save styled-components

with yarn

yarn add styled-components

This package can be found in the package.json file.

Add the styled-components in App.js

Now, we need to import the styled component package in app.js using the following command:

import styled from 'styled-components';

Now, we can start using the styled component. We will first create a styled component and then; see how we will use it.

Creating styled component 

Here, we styled the div into Box and h2 into the heading.

Now we will see how to use this in our app.

Using styled-components in function

Above, we created a styled component that can be used the same as any react component. 

Here, the Box and Heading are used in our app function.

Running our app in terminal

Now, our project is created for running the app we have to run the command in the terminal-

npm start

we can see our project in the browser.

This is our output in the browser where we create an element using a styled component.

Making life easy with Styled Components In React JS

After reading this article, you must now be familiar with the implications of styled-components in react js as an advanced CSS solution. However, to know more about CSS libraries and their applications, we suggest you consult an expert software development company like NLINEAXIS.

Also Read: How to work with TypeScript in a Node.js Project with Express