E2EHIRING Logo
search

Search blogs by title

Jobs
Jobs
internships
Internships
Company
Assessment
mentorship
Mentorship
more
Moredropdown
Login
HomeSepratorIconBlogsSepratorIconStyled Component in ReactSepratorIcon

Styled Component in React

Han SoloSanthiya V
calendar6 Aug 2022
poster

Styled Component in React


                     There are many options you can take when it comes to styling a React application. The traditional way would be to create an external CSS file. Styled-components is a popular library that is used to style React applications. It allows you to build custom components by writing actual CSS in your JavaScript.


Benefits of using styled-components:

 Automatic critical CSS :

       Styled-components keeps track of which components are rendered on a page and only adds their styles

 No class name bugs :

       Styled-components generates a unique class name for the styles

 Easier deletion of CSS:

       Styles are tied to a specific component rather than being added as a class name

 Simple dynamic styling :

       Styles can be added to a component based on props or a theme

 Painless maintenance: 

      Styles added to a component is done all in one place, rather than across multiple files

 Automatic vendor prefixing :

       Styled-components handles all of this.


Installation:

       The styled-components framework can be installed using either NPM or Yarn:

 npm install styled-components    (or)
 yarn add styled-components

 Then imported into React as follows:

 import styled from "styled-components";


Create  Styling components:

               Styled-components utilises tagged template literals to style components. So in order to style our components we need to declare a variable that matches the component name.You can  define what type of HTML element to render (div, h1, p, or button…):

Let's see in example:

Create a Styled-Component.

Styled-Component.js

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

export const StyledButton=styled.button`
 background-color: orange;
  color: white;
  height: 4rem;
  width: 16rem;
  font-size: 25px;
  border:1px solid red;`

 Import the Styled-Component in App.js


App.js

 import { StyledButton } from './Components/Styled-Components.js';

 function App() {
  return (
    <div className="App">
           <StyledButton>Login</StyledButton> 
           <StyledButton>Logout</StyledButton>
    </div> );
 }
 export default App;

I hope this article was helpful for you to get started using styled-components with React.

Thanks for reading! 


Recent Posts

e2eHiring’s GenZ mock assessments to enhance campus placements: Register now!

e2eHiring’s GenZ mock assessments to enhance campus placements: Register now!

How is Technology impacting the HR practices in India in the post Covid Era?

How is Technology impacting the HR practices in India in the post Covid Era?

Collection of 500+ ML projects

Collection of 500+ ML projects

How to Retain Your Tech Employees amid Economic Recession?

How to Retain Your Tech Employees amid Economic Recession?

User enumeration - vulnerability and mitigation

User enumeration - vulnerability and mitigation

copycopycopycopy

Han Solo

Recent Posts

e2eHiring’s GenZ mock assessments to enhance campus placements: Register now!

e2eHiring’s GenZ mock assessments to enhance campus placements: Register now!

How is Technology impacting the HR practices in India in the post Covid Era?

How is Technology impacting the HR practices in India in the post Covid Era?

Collection of 500+ ML projects

Collection of 500+ ML projects

How to Retain Your Tech Employees amid Economic Recession?

How to Retain Your Tech Employees amid Economic Recession?

User enumeration - vulnerability and mitigation

User enumeration - vulnerability and mitigation