created seperate style file for explore

package.json

@@ -15,7 +15,7 @@
     "react-dom": "^16.13.0",
     "react-helmet": "^6.1.0",
     "react-lottie": "^1.2.3",
-    "react-native-elements": "latest",
+    "react-native-elements": "^3.3.1",
     "react-native-safe-area-context": "^3.2.0",
     "react-native-vector-icons": "^6.7.0",
     "react-native-web": "^0.12.0",
@@ -52,8 +52,8 @@
     "@babel/plugin-proposal-class-properties": "^7.10.4",
     "customize-cra": "^1.0.0",
     "gh-pages": "^3.1.0",
-    "patch-package": "^6.2.2",
+    "patch-package": "^6.4.6",
     "postinstall-postinstall": "^2.1.0",
-    "react-app-rewired": "^2.1.6"
+    "react-app-rewired": "^2.1.8"
   }
 }

src/pages/explore/Explore.module.css

@@ -0,0 +1,14 @@
+.paper__position {
+    height: 60px;
+    padding: 5px 10px;
+    align-items: center;
+    display: flex;
+    position: relative;
+}
+.arrowforward__position {
+    position: absolute;
+    right: 10px;
+}
+.grid__position {
+    margin-top: 10;
+}

src/pages/explore/index.jsx

@@ -2,31 +2,22 @@ import React from "react";
 import { Typography, Paper, Grid } from "@material-ui/core";
 import { Link } from "react-router-dom";
 import { ArrowForward } from "@material-ui/icons";
-
+import styles from "./Explore.module.css"
 import { Components_Index } from "../../containers/Navigation";
 
 function Expore() {
   return (
     <section>
       <Typography variant="h2">Explore</Typography>
 
-      <Grid container spacing={1} style={{ marginTop: 20 }}>
+      <Grid container spacing={1} className={styles.grid__position} >
         {Components_Index.map((elm, idx) => {
           return (
             <Grid item xs={12} sm={6} md={4} lg={3}>
               <Link to={elm.path}>
-                <Paper
-                  style={{
-                    height: 60,
-                    padding: "5px 10px",
-                    alignItems: "center",
-                    display: "flex",
-                    position: "relative",
-                  }}
-                >
+                <Paper className={styles.paper__position}>
                   <Typography variant="h5">{elm.name}</Typography>
-
-                  <ArrowForward style={{ position: "absolute", right: 10 }} />
+                  <ArrowForward className={styles.arrowforward__position} />
                 </Paper>
               </Link>
             </Grid>