Added Styled Component

Author: HsharmaCoding

information

@@ -3,8 +3,9 @@
     1. CSS Stylesheet Regular css stylesheet
     2. Inline Styling
     3. CSS Modules 
-    4. CSS in js Libraries  (Styled Components)
-> Here we will cover only first three approaches.
+    4. Styled Components (CSS using Libraries)
+        > Install the package: npm install --save styled-components    
+        > For Typescript: npm i --save-dev @types/styled-components
 
 1. CSS Stylesheet (Regular css stylesheet)
     > src/Components/Stylesheet.tsx 
@@ -39,6 +40,10 @@
         > Similar we have imported applyStyle.module.css file in parent component (App.tsx). But
           We can not use it's classes in child component, because to use module.css we have to 
           import styles attribute then we can access it's classes.
+
+4. Styled Components
+    > Components/StyledComponent.tsx file has been created to utilize the styled component
+      styling. This file has been calling from the App.tsx. 
 
 
 

react-css-basic-app/package-lock.json

@@ -13,6 +13,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "styled-components": "^5.3.5",
     "typescript": "^4.7.4",
     "web-vitals": "^2.1.4"
   },
@@ -39,5 +40,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/styled-components": "^5.1.26"
   }
 }

react-css-basic-app/package.json

@@ -3,6 +3,7 @@ import logo from './logo.svg';
 import './App.css';
 import {Stylesheet} from './Components/Stylesheet';
 import {Inline} from './Components/Inline';
+import {StyledComponent} from './Components/StyledComponent';
 import '../src/applyStyle.css'
 import styles from '../src/applyStyle.module.css'
 
@@ -12,6 +13,7 @@ function App() {
       <header className="App-header">
       <Stylesheet primary={true}/>
       <Inline/>
+      <StyledComponent/>
       {/* use class from the appStyles.css */}
       <h1 className='error'>Error</h1>
       {/* use class from the appStyles.module.css */}

react-css-basic-app/src/App.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import styled from "styled-components";
+
+// Styled component named StyledButton
+const StyledButton = styled.button`
+  background-color: black;
+  font-size: 32px;
+  color: white;
+`;
+
+export const StyledComponent=()=>{
+    return(
+        <div>
+           {/* Use it like any other component. */}
+           <StyledButton> Login </StyledButton>
+        </div>
+    )
+}