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

import React from 'react'
import { makeStyles } from '@material-ui/core/styles'
import Fab from '@material-ui/core/Fab'
import Badge from '@material-ui/core/Badge'

const useStyles = makeStyles(() => ({
	fork: {
		position: 'absolute',
		right: 30,
		top: 30
	}
}))

const Fork = ({ stars }) => {
	const classes = useStyles()
	return (
		<div>
			
				</div>

/**
 * Layout component that queries for data
 * with Gatsby's StaticQuery component
 *
 * See: https://www.gatsbyjs.org/docs/static-query/
 */

import React from 'react'
import PropTypes from 'prop-types'
import { StaticQuery, graphql } from 'gatsby'
import { makeStyles } from '@material-ui/core/styles'
import Container from '@material-ui/core/Container'
import { Header, Footer } from '@gatsby-themes/tailwind';

const useStyles = makeStyles({
	root: {
		display: 'flex',
		flexGrow: 1,
		flexDirection: 'column',
		margin: `0 auto`,
		maxWidth: 960,
		padding: `0px 1.0875rem 1.45rem`,
		paddingTop: 10,
	},
})

const Layout = ({ children }) => {
	const classes = useStyles()
	return (

import React, { useEffect, useCallback } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import moment from 'moment';
import { HassEntity } from 'home-assistant-js-websocket';
import { makeStyles, Theme } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';

import { EntityProps } from './Entity';
import { fetchHistory } from '../Utils/API';
import Chart from '../../Visualisations/Chart';
import properCase from '../../../Utils/properCase';
import strings from '../Utils/Strings';

const useStyles = makeStyles((_theme: Theme) => ({
  root: {
    flex: 1
  },
  textContainer: {
    zIndex: 100
  },
  text: {
    overflow: 'hidden',
    userSelect: 'none',
    textAlign: 'center',
    textOverflow: 'ellipsis',
    zIndex: 100
  },
  iconContainer: {
    display: 'flex',
    alignContent: 'center',

import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";

import { cardTitle } from "assets/jss/material-dashboard-react.js";

const styles = {
  cardTitle,
  textCenter: {
    textAlign: "center"
  },
  textRight: {
    textAlign: "right"
  }
};

const useStyles = makeStyles(styles);

export default function CardsImages() {
  const classes = useStyles();
  return (
    <div>
      
        
          <h4>Special title treatment</h4>
          <p>
            With supporting text below as a natural lead-in to additional
            content.
          </p>
          <button color="primary">Go somewhere</button>
        
      
      </div>

import React from 'react';
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
import Avatar from '@material-ui/core/Avatar';

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      display: 'flex',
      '& > *': {
        margin: theme.spacing(1),
      },
    },
  }),
);

export default function ImageAvatars() {
  const classes = useStyles();

  return (
    <div>
      </div>

import React, { useEffect, useRef, useState } from 'react'
import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'

import { Event } from 'api/events.type'
import Loading from 'components-mui/Loading'
import NotFound from 'components-mui/NotFound'
import Paper from 'components-mui/Paper'
import PaperTop from 'components-mui/PaperTop'
import { RootState } from 'store'
import T from 'components/T'
import api from 'api'
import genEventsChart from 'lib/d3/eventsChart'
import { useIntl } from 'react-intl'
import { useSelector } from 'react-redux'

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    timelinePaper: {
      marginBottom: theme.spacing(6),
    },
    eventsChart: {
      height: 450,
    },
  })
)

export default function Events() {
  const classes = useStyles()

  const intl = useIntl()

  const { theme } = useSelector((state: RootState) => state.settings)

import React from 'react';

import { useStore } from 'store';
import { filterTodo } from 'actions';

import { makeStyles } from '@material-ui/core/styles';
import InputBase from '@material-ui/core/InputBase';
import SearchIcon from '@material-ui/icons/Search';

import styles from './styles';
const useStyles = makeStyles(styles);

export default () => {
  const [{ filter }, dispatch] = useStore();
  const classes = useStyles();

  return (
    <div>
      <div>
        
      </div>
       dispatch(filterTodo(e.target.value))}
        value={filter}
        classes={{
          root: classes.inputRoot,</div>

import classNames from "classnames";
import React from "react";
import { FormattedMessage } from "react-intl";

import { FilterContentSubmitData } from "./FilterContent";
import { IFilter } from "./types";
import { FilterContent } from ".";

export interface FilterProps {
  currencySymbol: string;
  menu: IFilter;
  filterLabel: string;
  onFilterAdd: (filter: FilterContentSubmitData) => void;
}

const useStyles = makeStyles(
  theme => ({
    addFilterButton: {
      "&$filterButton": {
        "&:hover, &:focus": {
          backgroundColor: fade(theme.palette.primary.main, 0.1)
        },
        backgroundColor: theme.palette.background.paper,
        border: `1px solid ${theme.palette.primary.main}`,
        cursor: "pointer",
        marginBottom: 0,
        marginRight: theme.spacing(2),
        marginTop: 0,
        transition: theme.transitions.duration.short + "ms"
      }
    },
    addFilterButtonActive: {

Examples: 
                         {searchUpdate('Bethlehem')}}>Bethlehem, 
                         {searchUpdate('Antioch')}}>Antioch
                    }
                />
                <button color="primary">Browse</button>
            
        
    );
}

const useStyles = makeStyles(theme =&gt; ({
    icon: {
        color:"#000",
        minWidth: 36,
        marginTop: 6,
    }
  }));

import ListItem from '@material-ui/core/ListItem';
import ListItemAvatar from '@material-ui/core/ListItemAvatar';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import ListItemText from '@material-ui/core/ListItemText';
import Avatar from '@material-ui/core/Avatar';
import IconButton from '@material-ui/core/IconButton';
import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import FolderIcon from '@material-ui/icons/Folder';
import DeleteIcon from '@material-ui/icons/Delete';

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
    maxWidth: 752,
  },
  demo: {
    backgroundColor: theme.palette.background.paper,
  },
  title: {
    margin: theme.spacing(4, 0, 2),
  },
}));

function generate(element) {
  return [0, 1, 2].map(value =>
    React.cloneElement(element, {
      key: value,