Add makeStyles with props example

components/atoms/SpacingPaper.tsx

@@ -0,0 +1,36 @@
+import { Paper } from "@material-ui/core"
+import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
+
+const useStyles = makeStyles<Theme, IProps>((theme: Theme) =>
+  createStyles({
+    root: (props: IProps) => ({
+      padding: props.noPadding === true ? theme.spacing(0) : theme.spacing(2),
+      marginBottom: theme.spacing(2),
+    }),
+  })
+)
+
+interface IProps {
+  /**
+   * shildren
+   */
+  children: React.ReactNode
+  /**
+   * zero-padding flag
+   */
+  noPadding?: boolean
+}
+
+/**
+ * Paper with spacing
+ * @param props IProps
+ */
+export const SpacingPaper = (props: IProps) => {
+  const { children } = props
+  const classes = useStyles(props)
+  return (
+    <Paper className={classes.root} elevation={6}>
+      {children}
+    </Paper>
+  )
+}

components/atoms/index.ts

@@ -0,0 +1 @@
+export * from "./SpacingPaper"

pages/about.tsx

@@ -1,6 +1,7 @@
-import { Paper, Typography } from "@material-ui/core"
+import { Typography } from "@material-ui/core"
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
 import React from "react"
+import { SpacingPaper } from "../components/atoms"
 import { HeaderArticleContainer } from "../components/organisms"
 import { Layout } from "../components/templates"
 import { Page } from "../constants"
@@ -9,10 +10,6 @@ import { IPagePayload, PageActions } from "../store/actions"
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {},
-    mainContainer: {
-      padding: theme.spacing(2),
-      marginBottom: theme.spacing(1),
-    },
   })
 )
 
@@ -21,9 +18,9 @@ function About() {
   return (
     <Layout>
       <HeaderArticleContainer>
-        <Paper className={classes.mainContainer}>
+        <SpacingPaper>
           <Typography variant="h5">About page !!</Typography>
-        </Paper>
+        </SpacingPaper>
       </HeaderArticleContainer>
     </Layout>
   )

pages/index.tsx

@@ -1,15 +1,12 @@
-import { Paper, Typography } from "@material-ui/core"
+import { Typography } from "@material-ui/core"
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
+import { SpacingPaper } from "../components/atoms"
 import { HeaderArticleContainer } from "../components/organisms"
 import { Layout } from "../components/templates"
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {},
-    mainContainer: {
-      padding: theme.spacing(2),
-      marginBottom: theme.spacing(1),
-    },
   })
 )
 
@@ -18,9 +15,16 @@ function Index() {
   return (
     <Layout>
       <HeaderArticleContainer>
-        <Paper className={classes.mainContainer}>
+        <SpacingPaper>
           <Typography variant="h5">Hello Next.js 👋</Typography>
-        </Paper>
+        </SpacingPaper>
+
+        <SpacingPaper noPadding>
+          <Typography variant="h5">zero padding paper</Typography>
+          <Typography variant="h6">
+            This component use makeStyles refer to Theme and Props.
+          </Typography>
+        </SpacingPaper>
       </HeaderArticleContainer>
     </Layout>
   )

pages/redux.tsx

@@ -2,13 +2,13 @@ import {
   Avatar,
   Button,
   FormControl,
-  Paper,
   TextField,
   Typography,
 } from "@material-ui/core"
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
 import React, { useState } from "react"
 import { useDispatch, useSelector } from "react-redux"
+import { SpacingPaper } from "../components/atoms"
 import { HeaderArticleContainer } from "../components/organisms"
 import { Layout } from "../components/templates"
 import { Page } from "../constants"
@@ -23,10 +23,6 @@ const useStyles = makeStyles((theme: Theme) =>
       backgroundColor: theme.palette.primary.main,
       color: theme.palette.primary.contrastText,
     },
-    mainContainer: {
-      padding: theme.spacing(2),
-      marginBottom: theme.spacing(1),
-    },
     title: {
       fontSize: "2em",
     },
@@ -80,7 +76,7 @@ function Redux() {
   return (
     <Layout>
       <HeaderArticleContainer>
-        <Paper className={classes.mainContainer}>
+        <SpacingPaper>
           <Typography variant="h2" gutterBottom className={classes.title}>
             Increment / Decrement
           </Typography>
@@ -92,9 +88,9 @@ function Redux() {
           <Button variant="contained" color="primary" onClick={handleDecrement}>
             - 1
           </Button>
-        </Paper>
+        </SpacingPaper>
 
-        <Paper className={classes.mainContainer}>
+        <SpacingPaper>
           <FormControl>
             <Typography variant="h2" gutterBottom className={classes.title}>
               Calculate
@@ -118,7 +114,7 @@ function Redux() {
               calculate
             </Button>
           </FormControl>
-        </Paper>
+        </SpacingPaper>
       </HeaderArticleContainer>
     </Layout>
   )