add createStyles call to all useStyles hooks

src/components/ColumnDrawer.tsx

@@ -3,6 +3,7 @@ import _camelCase from "lodash/camelCase";
 
 import {
   makeStyles,
+  createStyles,
   Drawer,
   List,
   Divider,
@@ -16,20 +17,22 @@ import AddIcon from "@material-ui/icons/Add";
 
 import { FIELDS } from "./Fields";
 
-const useStyles = makeStyles({
-  list: {
-    width: 250,
-  },
-  fields: {
-    paddingLeft: 15,
+const useStyles = makeStyles(() =>
+  createStyles({
+    list: {
+      width: 250,
+    },
+    fields: {
+      paddingLeft: 15,
 
-    paddingRight: 15,
-  },
+      paddingRight: 15,
+    },
 
-  fullList: {
-    width: "auto",
-  },
-});
+    fullList: {
+      width: "auto",
+    },
+  })
+);
 
 export default function ColumnDrawer(props: any) {
   const { addColumn, columns } = props;

src/components/Navigation.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 
 import {
-  createStyles,
   makeStyles,
+  createStyles,
   AppBar,
   CssBaseline,
   Toolbar,
@@ -11,7 +11,6 @@ import {
   Paper,
   Button,
 } from "@material-ui/core";
-import { Theme } from "@material-ui/core/styles";
 import MenuIcon from "@material-ui/icons/Menu";
 import Skeleton from "@material-ui/lab/Skeleton";
 
@@ -20,7 +19,7 @@ import CreateTableDialog from "./CreateTableDialog";
 import useSettings from "../hooks/useSettings";
 import useRouter from "../hooks/useRouter";
 
-const useStyles = makeStyles((theme: Theme) =>
+const useStyles = makeStyles(theme =>
   createStyles({
     text: {
       padding: theme.spacing(2, 2, 0),

src/views/AuthView.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import { maxWidth } from "@material-ui/system";
 import {
   makeStyles,
+  createStyles,
   Card,
   CardActions,
   CardContent,
@@ -13,19 +14,21 @@ import {
 import { googleProvider, auth } from "../firebase";
 import useRouter from "../hooks/useRouter";
 
-const useStyles = makeStyles({
-  card: {
-    margin: "auto",
-    minWidth: 275,
-    maxWidth: 300,
-  },
-  button: {
-    width: "100%",
-  },
-  header: {
-    textAlign: "center",
-  },
-});
+const useStyles = makeStyles(() =>
+  createStyles({
+    card: {
+      margin: "auto",
+      minWidth: 275,
+      maxWidth: 300,
+    },
+    button: {
+      width: "100%",
+    },
+    header: {
+      textAlign: "center",
+    },
+  })
+);
 
 // googleProvider.addScope("https://www.googleapis.com/auth/contacts.readonly");
 

src/views/TableView.tsx

@@ -1,18 +1,13 @@
 import React, { useEffect } from "react";
 
-import { makeStyles } from "@material-ui/core";
-
 import Navigation from "../components/Navigation";
 import Table from "../components/Table";
 
 import useRouter from "../hooks/useRouter";
 
-const useStyles = makeStyles({});
-
 export default function TableView() {
   const router = useRouter();
   const tableCollection = router.location.pathname.split("/")[2];
-  const classes = useStyles();
 
   return (
     <Navigation header={tableCollection}>

src/views/TablesView.tsx

@@ -2,6 +2,7 @@ import React from "react";
 
 import {
   makeStyles,
+  createStyles,
   Card,
   CardActions,
   CardContent,
@@ -13,22 +14,24 @@ import {
 import useSettings from "../hooks/useSettings";
 import useRouter from "../hooks/useRouter";
 
-const useStyles = makeStyles({
-  card: {
-    minWidth: 275,
-  },
-  bullet: {
-    display: "inline-block",
-    margin: "0 2px",
-    transform: "scale(0.8)",
-  },
-  title: {
-    fontSize: 14,
-  },
-  pos: {
-    marginBottom: 12,
-  },
-});
+const useStyles = makeStyles(() =>
+  createStyles({
+    card: {
+      minWidth: 275,
+    },
+    bullet: {
+      display: "inline-block",
+      margin: "0 2px",
+      transform: "scale(0.8)",
+    },
+    title: {
+      fontSize: 14,
+    },
+    pos: {
+      marginBottom: 12,
+    },
+  })
+);
 
 const TablesView = (props: any) => {
   const [settings, createTable] = useSettings();