React styled-components Module

React Styled-component Module allows us to write CSS within JavaScript in a very modular and reusable way in React. Instead of having one global CSS file for a React project, we can use styled-component to enhance the developer experience. It also removes the mapping between components and styles – using components as a low-level styling construct

Features of styled-component:

• Automatic vendor prefixing
• Replacement of writing style prop everywhere.
• Support for media query (unlike style prop).
• Easy to maintain

Prerequisites:

• React JS
• NPM & Node.js

Approach:

React-styled component is used to create react-reusable components with defined CSS. These components are created using JavaScript syntax with styling in multiline strings. Here’s an example to do it.

Steps to create React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app styled

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

cd styled

Step 3: 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:

Project Structure

The updated dependencies in package.json file will look like.

"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"
}

Example: This example shows simple inplementation of styled-components to create reusable button components with paramete background color.

Javascript

// Filename - App.js

import Button from "./Button";

function App() {
    return (
        <div
            style={{
                textAlign: "center",
                margin: "auto",
            }}
        >
            <h1 style={{ color: "green" }}>
                GeeksforGeeks
            </h1>
            <h3>React Styled-components example</h3>
            <Button bg="green"> Click </Button>
            <Button bg="yellow"> Click </Button>
        </div>
    );
}

export default App;

Javascript

// Filename - Button.js

import styled from "styled-components";

const Button = styled.div`
    height: 50px;
    width: 100px;
    cursor: pointer;
    text-decoration: none;
    color: blue;
    background-color: ${(props) =>
        props.bg === "green" ? "green" : "yellow"};
    margin: auto;
    font-size: 2rem;
`;

export default Button;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output: