React styled-components Module

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 for enhancing the developer experience. It also removes the mapping between components and styles – using components as a low-level styling construct

Main Features of styled-component:

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

Creating React Application And Installing Module:

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

npx create-react-app styled

Note: If you’ve previously installed create-react-app globally via npm, directly use the command below. Your development environment is ready. Let us now install styled-components in our Application.

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

cd styled

Step 3: Installing styled-components: styled-components can be installed via npm in your React application. Follow the steps given below to install styled-components in your React application. To install the styled-components use the following command:

With npm:

npm install --save styled-components

With yarn:

yarn add styled-components

Project Structure: It will look like the following.

Project Structure

Step 4: To add styled-components in your application, open your project directory in the editor you use.

And go to app.js file. Now, add the below-given code in app.js.

import styled from "styled-components"

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code. To use styled-components, let us first create one component in the react application. In your project directory, create a file named Button.js inside the src folder.

Add basic css properties in the template string. Also, in the Button Component, we add a div element. (We can add styled.div or styled.span or your own React Component)

To create multiple buttons of different style values (For eg: different colors), we can either use this different styled-Button component again or we can just pass props. 

Step 5:

Passing props

To make the styled components more dynamic we can pass props just like we pass props in React Components. 

Here in App.js, we pass a prop called bg with a color value.

In Button.js, the value of background-color we pass a template string wherein using a ternary operator we can check the value of props.bg attribute, and set the value of background-color accordingly. Also, if any CSS property requires prefixing then styled-component does it automatically. 

background-color : ${props => 
    props.bg === "green" ? "green" : "yellow"};

Button.js

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: