Using styled API in ReactJS

Styled components in ReactJS is a CSS-in-JS library that can be used for a better UI design. This API allows us to create a styled component and apply all styling properties. For using Styled API in React we need to install styled components.

Prerequisites:

• Basics of ReactJS
• Styled Components

Approach

To use the styled API in React JS we will install the styled-components npm package in our project. Then import and define the components using styled with custom stylings and directly use them as normal react components.

Steps to use styled components in React JS

Step 1: Initialize a React Project

Create a React application using the following command:

npx create-react-app styled

Step 2: Switch to Project Directory

After creating your project i.e. styled, move to the same directory:

cd styled

Step 3: Install styled-components

Use the command given below to install styled-components in your React application.

With npm:

npm i --save styled-components

With yarn:

yarn add styled-components

Project Structure:

List of updated dependencies in the package.json file:

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "styled-components": "^6.1.0",
    "web-vitals": "^2.1.4"
}

Step 4: Import the Module

Now import React and styled modules.

import React from 'react';
import styled from 'styled-components';

Below is a sample program to illustrate the use of styled-components:

Example 1: This example uses the styled component to change the background color of the button to green.

// Filename - App.js

import React from "react";

// Importing styled from styled-components
import styled from "styled-components";

// Importing the background-color of your
// choice to the button using css
// Button component that will render an <a>
// tag with some styles using styled.
const Button = styled.a`
	background-color: green;
	color: white;
	padding: 1rem 2rem;
	margin-top: 100px;
	width: 150px;
	display: block;
`;
const App = () => {
	return (
		<center>
			<Button>GeeksforGeeks</Button>
		</center>
	);
};

export default App;

Output:

Example 2: This example uses the styled components to add a border to the button.

// Filename - App.js

import React from "react";

// Importing styled from styled components
import styled from "styled-components";

// Importing the background-color of your
// choice to the button using css
// Button component that will render an <a>
// tag with some styles using styled.
const Button = styled.a`
	background-color: green;
	color: white;
	padding: 1rem 2rem;
	margin-top: 100px;
	width: 150px;
	display: block;
	border: 8px solid black;
`;

const App = () => {
	return (
		<center>
			<Button>GeeksforGeeks</Button>
		</center>
	);
};

export default App;

Output:

Hence, using the above-mentioned steps, we can use the Styled-components to import and change the style of components in React.