E2EHIRING Logo
Jobs
Jobs
courses
Courses
mentorship
Mentorship
more
Moredropdown
E2EHIRING Logo
more
Jobs
Jobs
courses
Courses
mentorship
Mentorship
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

Accelerate Your Career with e2eInternship Program June 2023: Fast Track your Coding Skills!

Accelerate Your Career with e2eInternship Program June 2023: Fast Track your Coding Skills!

Secure Your Future with e2eHiring: Apply for the Ideal Internship Today

Secure Your Future with e2eHiring: Apply for the Ideal Internship Today

Upskilling: Key to Survival and Career Advancement amid Layoffs

Upskilling: Key to Survival and Career Advancement amid Layoffs

Decoding Dream Job: What makes it so difficult to get a dream job?

Decoding Dream Job: What makes it so difficult to get a dream job?

Improving Training Impact Through Effective Presentations

Improving Training Impact Through Effective Presentations

copycopycopycopy

Han Solo

Recent Posts

Accelerate Your Career with e2eInternship Program June 2023: Fast Track your Coding Skills!

Accelerate Your Career with e2eInternship Program June 2023: Fast Track your Coding Skills!

Secure Your Future with e2eHiring: Apply for the Ideal Internship Today

Secure Your Future with e2eHiring: Apply for the Ideal Internship Today

Upskilling: Key to Survival and Career Advancement amid Layoffs

Upskilling: Key to Survival and Career Advancement amid Layoffs

Decoding Dream Job: What makes it so difficult to get a dream job?

Decoding Dream Job: What makes it so difficult to get a dream job?

Improving Training Impact Through Effective Presentations

Improving Training Impact Through Effective Presentations