Migrate withStyles(HOC) to StylesHook without component-based classes

components/molecules/NextListItem.tsx

@@ -4,16 +4,11 @@ import {
   ListItemAvatar,
   ListItemText,
 } from "@material-ui/core"
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles,
-} from "@material-ui/core/styles"
+import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
 import Link from "next/link"
 import React from "react"
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {},
     anchorLink: {
@@ -29,8 +24,9 @@ const styles = (theme: Theme) =>
       color: theme.palette.primary.contrastText,
     },
   })
+)
 
-interface IProps extends WithStyles<typeof styles> {
+interface IProps {
   /**
    * <Link href="/">
    */
@@ -61,8 +57,9 @@ interface IProps extends WithStyles<typeof styles> {
  * Next.js optimized <ListItem>
  * @param props IProps
  */
-const NextListItemComponent = (props: IProps) => {
-  const { classes, className, href, icon, primary, secondary, onClick } = props
+export const NextListItem = function(props: IProps) {
+  const { className, href, icon, primary, secondary, onClick } = props
+  const classes = useStyles(props)
   const AvatorIcon = () => icon
   return (
     <Link href={href}>
@@ -84,5 +81,3 @@ const NextListItemComponent = (props: IProps) => {
     </Link>
   )
 }
-
-export const NextListItem = withStyles(styles)(NextListItemComponent)

components/molecules/PageHeader.tsx

@@ -1,16 +1,11 @@
 import { Paper, Typography } from "@material-ui/core"
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles,
-} from "@material-ui/core/styles"
+import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
 import React from "react"
 import { connect } from "react-redux"
 import { Page } from "../../constants"
 import { IInitialState } from "../../store/states"
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
       backgroundColor: theme.palette.primary.main,
@@ -28,8 +23,9 @@ const styles = (theme: Theme) =>
     },
     description: {},
   })
+)
 
-interface IProps extends WithStyles<typeof styles> {
+interface IProps {
   /**
    * from redux
    */
@@ -41,7 +37,8 @@ interface IProps extends WithStyles<typeof styles> {
  * @param props IProps
  */
 const PageHeaderComponent = (props: IProps) => {
-  const { classes, selectedPage } = props
+  const { selectedPage } = props
+  const classes = useStyles(props)
   return (
     <Paper square={true} className={classes.root}>
       <Typography variant="h1" color="inherit" className={classes.title}>
@@ -62,9 +59,7 @@ const mapStateToProps = (state: IInitialState) => ({
   selectedPage: state.page.selectedPage,
 })
 
-export const PageHeader = withStyles(styles)(
-  connect(
-    mapStateToProps,
-    undefined
-  )(PageHeaderComponent as any)
-)
+export const PageHeader = connect(
+  mapStateToProps,
+  undefined
+)(PageHeaderComponent as any)

components/organisms/HeaderArticleContainer.tsx

@@ -1,20 +1,16 @@
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles,
-} from "@material-ui/core/styles"
+import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
 import { PageHeader } from "../molecules"
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {},
     contentsContainer: {
       padding: theme.spacing(1),
     },
   })
+)
 
-interface IProps extends WithStyles<typeof styles> {
+interface IProps {
   /**
    * children
    */
@@ -25,16 +21,13 @@ interface IProps extends WithStyles<typeof styles> {
  * Header and article container component
  * @param props IProps
  */
-const HeaderArticleContainerComponent = (props: IProps) => {
-  const { classes, children } = props
+export const HeaderArticleContainer = function(props: IProps) {
+  const { children } = props
+  const classes = useStyles(props)
   return (
     <>
       <PageHeader />
       <section className={classes.contentsContainer}>{children}</section>
     </>
   )
 }
-
-export const HeaderArticleContainer = withStyles(styles)(
-  HeaderArticleContainerComponent
-)

components/organisms/Sidenavi.tsx

@@ -1,10 +1,5 @@
 import { List } from "@material-ui/core"
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles,
-} from "@material-ui/core/styles"
+import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
 import SvgIcon from "@material-ui/core/SvgIcon"
 import { connect } from "react-redux"
 import { bindActionCreators, Dispatch } from "redux"
@@ -14,7 +9,7 @@ import { IPagePayload, PageActions } from "../../store/actions"
 import { IInitialState } from "../../store/states"
 import { NextListItem } from "../molecules"
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
       backgroundColor: theme.palette.primary.main,
@@ -50,8 +45,9 @@ const styles = (theme: Theme) =>
       backgroundColor: theme.palette.primary.light,
     },
   })
+)
 
-interface IProps extends WithStyles<typeof styles> {
+interface IProps {
   changePage: (pagePayload: IPagePayload) => number
   selectedPage: Page
 }
@@ -61,7 +57,8 @@ interface IProps extends WithStyles<typeof styles> {
  * @param props IProps
  */
 const SidenaviComponent = (props: IProps) => {
-  const { classes, changePage, selectedPage } = props
+  const { changePage, selectedPage } = props
+  const classes = useStyles(props)
 
   const handleChangePage = (page: Page) => () =>
     changePage({ selectedPage: page })
@@ -111,4 +108,4 @@ const mapDispatchToProps = (dispatch: Dispatch<Action<IPagePayload>>) =>
 export const Sidenavi = connect(
   mapStateToProps,
   mapDispatchToProps
-)(withStyles(styles)(SidenaviComponent as any))
+)(SidenaviComponent as any)

components/templates/Layout.tsx

@@ -1,30 +1,27 @@
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles,
-} from "@material-ui/core/styles"
+import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
 import Head from "next/head"
 import * as React from "react"
 import { connect } from "react-redux"
 import { Page } from "../../constants"
 import { IInitialState } from "../../store/states"
 import { ResponsiveDrawer } from "../organisms"
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
       height: "100%",
     },
   })
+)
 
-interface IProps extends WithStyles<typeof styles> {
+interface IProps {
   children: React.ReactNode
   selectedPage: Page
 }
 
 const LayoutComponent = (props: IProps) => {
-  const { classes, children, selectedPage } = props
+  const { children, selectedPage } = props
+  const classes = useStyles(props)
   return (
     <section className={classes.root}>
       <Head>
@@ -44,4 +41,4 @@ const mapStateToProps = (state: IInitialState) => ({
 export const Layout = connect(
   mapStateToProps,
   undefined
-)(withStyles(styles)(LayoutComponent as any))
+)(LayoutComponent as any)