Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

React styled-components Module

  • Last Updated : 09 Nov, 2021

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.



App.js




import Button from './Button'
  
function App() {
  return (
    <div >
      <Button> Click </Button>
    </div>
  );
}
  
export default App;


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)

Button.js




import styled from 'styled-components'
  
const Button = styled.div`
    width : 100px ;
      cursor: pointer ;
    text-docration : none;
    color : white ;
    background-color : purple;
    margin : 0 auto ;
    font-size:2rem; 
`
  
export default Button;


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.

App.js




import Button from './Button'
  
function App() {
  return (
    <div >
      <Button bg="green"> Click </Button>
      <Button bg="yellow"> Click </Button>
    </div>
  );
}
  
export default App;


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

Javascript




import styled from 'styled-components'
  
const Button = styled.div`
    height:50px
    width : 100px ;
    cursor: pointer ;
    text-docration : none;
    color : blue;
    background-color : ${props => props.bg === 
                      "green" ? "green" : "yellow"};
    margin: 0 auto;
    font - size: 3rem;
`
  
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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!