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!