How to use the @material-ui/core/styles/makeStyles function in @material-ui/core

import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import IconButton from "@material-ui/core/IconButton";
import Button from "@material-ui/core/Button";

import MenuIcon from "@material-ui/icons/Menu";
import Skeleton from "@material-ui/lab/Skeleton";

import CreateTableDialog from "./CreateTableDialog";

import useSettings from "../hooks/useSettings";
import useRouter from "../hooks/useRouter";
import TablesContext from "../contexts/tablesContext";
// import { auth } from "../firebase";

const useStyles = makeStyles(theme =>
  createStyles({
    text: {
      padding: theme.spacing(2, 2, 0),
    },
    paper: {
      paddingBottom: 20,
      paddingTop: 5,
    },

    subheader: {
      backgroundColor: theme.palette.background.paper,
    },
    appBar: {
      top: "auto",
      bottom: 0,
    },

import NoData from './NoData';
import { useApplicationsData } from '../../Hooks/ApplicationsHooks';
import ToggleFilter from './Filters/ToggleFilter';
import CellDetails from './Cells/CellDetails';
import TableCell from '@material-ui/core/TableCell';

const parseSortBy = (sortby = '|') => sortby.split('|');
const paramToArray = (param = '') => (param ? param.split(',') : []);
const paramToNumber = (value) => {
  if (value || value === 0) {
    return parseInt(value);
  }
  return null;
};

const useStyles = makeStyles((theme) => ({
  subTitle: {
    display: 'inline-block',
  },
  row: {
    height: 49,
    '&:hover $actions': {
      opacity: 1,
    },
  },
  iconName: {
    marginRight: 5,
  },
  actions: {
    opacity: 0,
    display: 'flex',
    flexDirection: 'row-reverse',

import LinearProgress from '@material-ui/core/LinearProgress';
import makeStyles from '@material-ui/core/styles/makeStyles';
import * as React from 'react';
import * as zxcvbn from 'zxcvbn';

const useStyles = makeStyles({
    progressBar: {
        color: '#000000',
        display: 'flex',
        flexGrow: 1,
    },
    progressBarColorHigh: {
        backgroundColor: '#4caf50',
    },
    progressBarColorLow: {
        backgroundColor: '#ff5722',
    },
    progressBarColorMedium: {
        backgroundColor: '#ffc107',
    },
});

import DarkThemeIcon from '@material-ui/icons/Brightness2'
import LightThemeIcon from '@material-ui/icons/WbSunny'
import * as React from 'react'
import { Switch, Theme } from '@material-ui/core'
import { darkTheme } from '../model'
import makeStyles from '@material-ui/core/styles/makeStyles'

const useStyles = makeStyles({
    root: {
        display: 'grid',
        gridTemplateColumns: 'auto 1fr auto',
        alignItems: 'center'
    },
    icon: {
        margin: 4
    }
})

export interface Props {
    readonly theme: Theme
    readonly onToggleTheme: () => void
}

export const ThemeSwitch = ({ theme, onToggleTheme }: Props) => {

import React, {useEffect, Fragment} from 'react';
import 'typeface-roboto';
import makeStyles from '@material-ui/core/styles/makeStyles';
import { Button, Container, Typography } from '@material-ui/core';
import Grid from "@material-ui/core/Grid";
import isMobile  from 'ismobilejs';

const useStyles = makeStyles(theme => ({
  logo: {
    maxWidth: 150,
    marginBottom: theme.spacing(2)
  },

  main: {
    marginTop: theme.spacing(8),
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center'
  },

  os: {
    marginTop: theme.spacing(8)
  }
}));

import React from 'react'
import PropTypes from 'prop-types'
import { Divider, Paper } from '@material-ui/core'
import _ from 'lodash'
import makeStyles from '@material-ui/core/styles/makeStyles'
import StatusForm from './StatusForm'
import StatusHeader from './StatusHeader'
import StatusBody from './StatusBody'
import useIsFormEditing from '../../../hooks/useIsFormEditing'

const useStyles = makeStyles(theme => ({
  root: {
    borderTopColor: theme.palette.primary.main,
    borderTopWidth: 6,
    borderTopStyle: 'solid',
    marginTop: theme.spacing(2),
    marginBottom: theme.spacing(2),
  },
  paper: {
    zIndex: 1,
    position: 'relative',
    marginTop: theme.spacing(1),
    boxShadow: 'none',
  },
}))

export const Status = ({ statusInfo, updateStatus }) => {

children?: React.ReactNode
  elevation?: number
  onClick?: () => void
  style?: React.CSSProperties
}) => {
  const classes = useCardStyles()
  return (
    
      
        {props.children}
      
    
  )
}

const useBadgeStyles = makeStyles({
  badge: {
    marginTop: 4,
    marginRight: -2
  }
})

const StyledBadge = (props: BadgeProps) => {
  const classes = useBadgeStyles()
  return props.badgeContent ? (
    
  ) : (
    <div style="{props.style}">
      {props.children}
    </div>
  )
}

import React, { useCallback } from 'react';
import {
  AppBar, Toolbar, Typography, Button, Grid, Card,
} from '@material-ui/core';
import makeStyles from '@material-ui/core/styles/makeStyles';
import { Banner, StaticBanner } from '../../index';

const useStyles = makeStyles((theme) => ({
  flex: {
    flexGrow: 1,
  },
  appBarSpacer: theme.mixins.toolbar,
  avatar: {
    backgroundColor: theme.palette.secondary.main,
  },
}));

export default React.memo(() => {
  const classes = useStyles();

  const handleOpenSmall = useCallback(() => StaticBanner.show({
    icon: <div>,
    label: 'This is an example of a static banner with one line of text.',
  }), []);</div>

import CircularProgress from '@material-ui/core/CircularProgress';
import makeStyles from '@material-ui/core/styles/makeStyles';
import * as React from 'react';

const useStyles = makeStyles(({ spacing }: any) => ({
    progress: {
        margin: spacing(2),
    },
    workingModal: {
        alignItems: 'center',
        backgroundColor: '#bdbdbd',
        display: 'flex',
        height: '100%',
        justifyContent: 'center',
        left: 0,
        opacity: 0.5,
        position: 'absolute',
        top: 0,
        width: '100%',
        zIndex: 2000,
    },

import makeStyles from "@material-ui/core/styles/makeStyles";
import createStyles from "@material-ui/core/styles/createStyles";
import Drawer from "@material-ui/core/Drawer";
import List from "@material-ui/core/List";
import Divider from "@material-ui/core/Divider";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import IconButton from "@material-ui/core/IconButton";
import TextField from "@material-ui/core/TextField";

import AddIcon from "@material-ui/icons/Add";

import { FIELDS } from "./Fields";

const useStyles = makeStyles(() =>
  createStyles({
    list: {
      width: 250,
    },
    fields: {
      paddingLeft: 15,

      paddingRight: 15,
    },

    fullList: {
      width: "auto",
    },
  })
);