adding styled-components and using them in homepage components via homepage.styles.jsx

Author: rigole

package-lock.json

@@ -17,6 +17,7 @@
     "redux-logger": "^3.0.6",
     "redux-persist": "^6.0.0",
     "reselect": "^4.0.0",
+    "styled-components": "^5.3.1",
     "web-vitals": "^1.1.2"
   },
   "scripts": {

package.json

@@ -1,10 +1,14 @@
 import React from "react";
-import './homepage.styles.scss';
+
 import Directory from "../../components/directory/directory.component";
-const HomePage = ({ history }) => (
-    <div className='homepage'>
-       <Directory history={history}/>
-    </div>
+
+import { HomepageContainer } from "./homepage.styles";
+
+
+const HomePage = () => (
+    <HomepageContainer>
+       <Directory />
+    </HomepageContainer>
 )
 
 export default HomePage;

src/pages/homepage/homepage.component.jsx

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+
+export const HomepageContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+`;

src/pages/homepage/homepage.styles.jsx

@@ -1,8 +1,8 @@
 .homepage {
-  display: flex;
+  /*display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 20px 80px;
+  padding: 20px 80px;*/
 }