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-decoration : 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-decoration : 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:
