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

>
      
        
      
      
        
          {/* capitalize the first letter of the provider name: */}
          {loginProvider.name.charAt(0).toUpperCase() +
            loginProvider.name.substring(1)}
        
      
    
  );
};

const useStyles = makeStyles(() =>
  createStyles({
    button: {
      position: "absolute",
    },
  }),
);

type Props = {
  appConfig: AppConfig;
  disableRestoreFocus?: boolean;
  render: (openModal: () => void) => React.ReactNode;
};

const LoginModal = ({
  appConfig,
  disableRestoreFocus = false,

makeStyles,
  colors,
  Button,
} from '@material-ui/core';
import { ThumbUpAlt, Settings } from '@material-ui/icons';
import useTranslations from '../translations';
import PreviousGames from './home/PreviousGames';
import CreateSessionModal from './home/CreateSession';
import logo from './home/logo.png';
import { SessionOptions, ColumnDefinition } from 'retro-board-common';
import { trackEvent } from './../track';
import { createCustomGame } from '../api';
import { Page } from '../components/Page';
import usePreviousSessions from '../hooks/usePreviousSessions';

const useStyles = makeStyles({
  media: {
    objectFit: 'cover',
    backgroundColor: colors.grey[200],
  },
  actions: {
    justifyContent: 'center',
    margin: 20,
  },
  buttonIcon: {
    marginRight: 10,
  },
});

function Home() {
  const history = useHistory();
  const translations = useTranslations();

import { makeStyles } from '@material-ui/core';

export const useStyles = makeStyles(({ palette, breakpoints, zIndex, spacing }) => ({
  container: {
    height: '100%',
  },
  header: {
    height: 48,
    backgroundColor: palette.primary.main,
    color: palette.primary.contrastText,
  },
  content: {
    height: 'calc(100vh - 48px)',
    padding: spacing(0.5),
  },
  songsList: {
    paddingRight: 0,
  },
  subContent: {

import IconButton from "@material-ui/core/IconButton";
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
import Divider from "@material-ui/core/Divider";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import Drawer from "@material-ui/core/Drawer";
import ChevronRightIcon from "@material-ui/icons/ChevronRight";
import { makeStyles, useTheme } from "@material-ui/core";
import DefaultNavIcon from "@material-ui/icons/TransitEnterexit";
import * as routes from "../../routes";

export const drawerWidth = 240;

export const useStyles = makeStyles(theme => ({
  drawer: {
    width: drawerWidth,
    flexShrink: 0
  },
  drawerPaper: {
    width: drawerWidth
  },
  drawerHeader: {
    display: "flex",
    alignItems: "center",
    padding: theme.spacing(0, 1),
    ...theme.mixins.toolbar,
    justifyContent: "flex-end"
  }
}));

import React, { useContext, useState, useCallback } from "react";
import PropTypes from "prop-types";
import { injectStripe, CardElement } from "react-stripe-elements";
import { makeStyles } from "@material-ui/core";
import Button from "@material-ui/core/Button";
import { ThemeContext } from "../../../components/Theme";
import { CustomerContext } from "../../../providers/Customer";
import { Address, Email, FullName, Phone } from "../../../components/fields";
import Grid from "@material-ui/core/Grid";
import Typography from "@material-ui/core/Typography";
import useForm from "../../../components/form/useForm";
import Checkbox from "@material-ui/core/Checkbox";
import FormControlLabel from "@material-ui/core/FormControlLabel";

const useStyles = makeStyles(theme => ({
  cardElement: {
    border: "solid 1px",
    borderColor:
      theme.palette.type === "light"
        ? "rgba(0, 0, 0, 0.23)"
        : "rgba(255, 255, 255, 0.23)",
    borderRadius: theme.shape.borderRadius,
    padding: "18.5px 14px"
  }
}));

const StyledCardElement = () => {
  const classes = useStyles();
  const { themeObject } = useContext(ThemeContext);

  return (

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

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    artwork: (props: ArtworkProps) => ({
      width: props.width,
      height: props.height,
      backgroundImage: `url(${props.url})`,
      backgroundSize: 'cover!important',
    }),
  }),
);

type ArtworkProps = {
  height: number | string,
  width: number | string,
  url: string,
}

import {
  IconButton,
  makeStyles,
  Snackbar,
  SnackbarContent,
} from '@material-ui/core';
import ErrorIcon from '@material-ui/icons/Error';
import CloseIcon from '@material-ui/icons/Close';
import React from 'react';
import PropTypes from 'prop-types';

const SnackBarStyles = makeStyles(theme => ({
  error: {
    backgroundColor: theme.palette.error.dark,
  },
  message: {
    display: 'flex',
    alignItems: 'center',
  },
  icon: {
    marginRight: '20px',
    fontSize: 20,
  },
}));

function ErrorSnackBar({ open, closeHandle, errorMessage }) {
  const classes = SnackBarStyles();
  return (

import React from 'react';
import LoginForm from '../components/Login/LoginForm';
import { makeStyles } from '@material-ui/core';

const useStyles = makeStyles({
  root: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    height: '100vh',
  },
});
export const SignInPage = ({ location, onNewLogin }) => {
  const classes = useStyles();
  return (
    <div>
      
    </div>
  );
};

onlyInScope
      searchExpression
    }
  }
`;

const SET_FILTER = gql`
  mutation SetHttpRequestLogFilter($filter: HttpRequestLogFilterInput) {
    setHttpRequestLogFilter(filter: $filter) {
      onlyInScope
      searchExpression
    }
  }
`;

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      padding: "2px 4px",
      display: "flex",
      alignItems: "center",
      width: 400,
    },
    input: {
      marginLeft: theme.spacing(1),
      flex: 1,
    },
    iconButton: {
      padding: 10,
    },
    filterPopper: {
      width: 400,

createStyles,
  Typography,
  makeStyles,
  IconButton,
  Paper,
  Chip,
} from '@material-ui/core';

type InsightViewer = {
  definitions?: boolean;
  index?: number;
  wiki?: boolean;
  auto?: boolean;
};

const useStyles = makeStyles(() =>
  createStyles({
    expanded: {
      top: '0% !important',
    },
    header: {
      marginBottom: '1em',
      display: 'flex',
    },
    title: {
      textOverflow: 'ellipsis',
      whiteSpace: 'nowrap',
      overflowX: 'hidden',
      fontSize: '150%',
      flex: '1',
    },
    body: {