How to use styled-components

Libraries i used for this mini project:

1. Styled-Components
2. Create-React-App

if you want to use CSS-in-JS and you don't know how to use styled-components with React i hope you will get enough knowledge of basics to start using it.
we will learn by creating a simple LoginIn form (without validation stuff) using style components in CRA.

Lets start with installation:
open your terminal and write:

npm install --save -g styled-components 

---

Here is our first example of an variable div that will display label and input in CRA:
fileName: StyledForm.jsx

import styled from "styled-components"

 //now below style a parent div as a variable and name it 
 //Note: always use Pascal Case for Naming Styled Components
 //we use styled.variableType to create a variable 

const ParentForm = styled.form`
  display: grid;
  grid-template-columns;1fr;
  grid-template-rows:auto;
    border: 1px solid Black;
    margin: auto;
    *{
      margin: auto;
      padding: 0.5rem 1rem;
      display:grid
    }

`;

// don't export default anything from styled components file

export {ParentForm}

Alright here we created our first styled variable that is Parent div for the Signin form.

---

Lets now create main Form component.

Filename: Form.jsx

import React from "react";

//create a stateful class

class Form extends React.Component {}

Now we import ParentForm we created in StyledForm.jsx.

import React from "react";import {
  ParentForm
} from "../StyledForm.jsx";


//create a stateful class

class Form extends React.Component {}

now we will create a render function in that we will return this component.

import React from "react";import {
  ParentForm
} from "../StyledForm.jsx";


//create a stateful class

class Form extends React.Component {
render(){
return Here we will add form labels and inputs 
}
}

---

But wait what if you have to add same template n number of times ?
for efficiency we will create a function that will take all the elements of form
as an argument and return us the template html.

import React from "react";import {
  ParentForm
} from "../StyledForm.jsx";


//create a stateful class

class Form extends React.Component {
render(){  
const functionalDiv = (id, type, placeHolder) => {
      return (
        
          {id}
          
        
      );
    };
return Here we will add form labels and inputs 
}
}

---

now lets add our rest of components:

import React from "react";
import {
  ParentForm
} from "../StyledForm.jsx";


//create a stateful class

class Form extends React.Component {
render(){  
const functionalDiv = (id, type, placeHolder) => {
      return (
        
          {id}
          
        
      );
    };
return (
    <>
        
          
            
Please SignIn to Access Your Account.
          
          {functionalDiv("username", "text", "enter username")}
          {functionalDiv("password", "password", "enter password")}
          
             alert("Successfully Logged in ")}
            >
              Submit
            
          
        
      >

)
}
}

---

Now create an onSubmit Stylebutton that will prevent the whole page from refreshing.

const onSubmit=e=>{
e.preventDefault()
}

Now we will create the remaining styling for the form and export them.

import styled from "styled-components";
const ParentForm = styled.form`
  display: grid;
  grid-template-columns;1fr;
  grid-template-rows:auto;
    border: 1px solid Black;
    margin: auto;
    *{
      margin: auto;
      padding: 0.5rem 1rem;
      display:grid
    }

`;
const HeaderForm = styled.div`
  > p {
    font-size: 1.5em;
    font-weight: 600;
  }
`;
const FormMainBody = styled.div`
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  margin: auto;
  label {
    text-align: left;
    text-transform: uppercase;
    font-weight: 600;
  }
  input {
    border: 1px solid Black;
    padding: 5px 10px;
    caret-color: green;
  }
`;
const StyleButton = styled.Stylebutton`
  padding: 5px 20px;
  color: white;
  background-color: ${props => [props.bgcolor]};
`;

export { ParentForm, HeaderForm, FormMainBody, StyleButton };

---

Here is the final Form.js file:

import React from "react";
import {
  ParentForm,
  HeaderForm,
  FormMainBody,
  StyleButton
} from "../StyledForm.jsx";

class Form extends React.Component {
  render() {
    const functionalDiv = (id, type, placeHolder) => {
      return (
        
          {id}
          
        
      );
    };
    const onSubmit = e => {
      e.preventDefault();
    };
    return (
      
        
          
            
Please SignIn to Access Your Account.
          
          {functionalDiv("username", "text", "enter username")}
          {functionalDiv("password", "password", "enter password")}
          
             alert("Successfully Logged in ")}
            >
              Submit
            
          
        
     
    );
  }
}
export default Form;

---

That's it that's how we created a simple login in form using styled-components.
here is the codesandbox link :here
If you get any questions regarding this DM me on Twitter.