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

import * as React from "react";
import { withRouter, RouteComponentProps } from "react-router-dom";
import makeStyles from "@material-ui/styles/makeStyles";
import createStyles from "@material-ui/styles/createStyles";
import Card from "@material-ui/core/Card";
import CardHeader from "@material-ui/core/CardHeader";
import CardContent from "@material-ui/core/CardContent";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";
import { LoginEntity, createEmptyLogin } from "../model/login";
import { isValidLogin } from "../api/login";
import { NotificationComponent } from "../common";

// https://material-ui.com/styles/api/#makestyles-styles-options-hook
const useStyles = makeStyles(theme =>
  createStyles({
    card: {
      maxWidth: 400,
      margin: "0 auto"
    }
  })
);

interface Props extends RouteComponentProps {}

const LoginPageInner = (props: Props) => {
  const [loginInfo, setLoginInfo] = React.useState(
    createEmptyLogin()
  );
  const [showLoginFailedMsg, setShowLoginFailedMsg] = React.useState(false);
  const classes = useStyles();

/>
    
  );
};

export const LoginPage = withRouter(LoginPageInner);

interface PropsForm {
  onLogin: () => void;
  onUpdateField: (string, any) => void;
  loginInfo: LoginEntity;
  loginFormErrors: LoginFormErrors;
}

// https://material-ui.com/styles/api/#makestyles-styles-options-hook
const useFormStyles = makeStyles(theme =>
  createStyles({
    formContainer: {
      display: "flex",
      flexDirection: "column",
      justifyContent: "center"
    }
  })
);

const LoginForm = (props: PropsForm) => {
  const classes = useFormStyles();
  const { onLogin, onUpdateField, loginInfo, loginFormErrors } = props;

  // TODO: Enhacement move this outside the stateless component discuss why is a good idea
  const onTexFieldChange = fieldId => e => {
    onUpdateField(fieldId, e.target.value);

import makeStyles from '@material-ui/styles/makeStyles';
import * as React from 'react';
import { Route } from 'react-router-dom';
import Navigation from '../components/Navigation';
import Examples from './Examples';
import Overview from './Overview';

const useStyles = makeStyles((theme: any) => ({
    content: {
        backgroundColor: theme.palette.background.default,
        flexGrow: 1,
        minWidth: 0,
        overflowY: 'auto',
        padding: theme.spacing(2),
    },
    root: {
        display: 'flex',
        flexGrow: 1,
        height: '100%',
        overflow: 'hidden',
        position: 'relative',
        zIndex: 1,
    },
    toolbar: theme.mixins.toolbar,

import Paper from '@material-ui/core/Paper';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import makeStyles from '@material-ui/styles/makeStyles';
import * as React from 'react';

const useStyles = makeStyles({
    code: {
        background: '#F8F8FF',
        fontSize: 14,
    },
    root: {
        overflowX: 'auto',
        width: '100%',
    },
});

export default () => {
    const classes = useStyles({});

    return (
        
            <table></table>

import Button from '@material-ui/core/Button';
import makeStyles from '@material-ui/styles/makeStyles';
import * as React from 'react';
import { useStateForModel, ValidatorForm } from 'uno-react';
import { TextValidator } from '../../src/';

const useStyles = makeStyles({
    form: {
        display: 'flex',
        flexDirection: 'column',
        width: '50%',
    },
});

export default (props: any) => {
    const classes = useStyles(props);
    const [data, handleChange] = useStateForModel({ name: '' });

    const sendData = () => handleChange({ name: '' });

    return (

import { Theme } from "@material-ui/core/styles";
import TableCell from "@material-ui/core/TableCell";
import makeStyles from "@material-ui/styles/makeStyles";
import * as React from "react";
import { SortableHandle as SortableHandleHoc } from "react-sortable-hoc";

import Draggable from "@saleor/icons/Draggable";

const useStyles = makeStyles((theme: Theme) => ({
  columnDrag: {
    "&:first-child": {
      paddingRight: theme.spacing.unit * 2
    },
    cursor: "grab",
    width: 48 + theme.spacing.unit * 1.5
  }
}));

const SortableHandle = SortableHandleHoc(() => {
  const classes = useStyles({});

  return (

import Typography from '@material-ui/core/Typography';
import makeStyles from '@material-ui/styles/makeStyles';
import PropTypes from 'prop-types';
import React from 'react';
import _ from 'underscore';
import { Channel, Package } from '../../api/apiDataTypes';
import { ARCHES, cleanSemverVersion } from '../../constants/helpers';
import flatcarIcon from '../../icons/flatcar-logo.json';
import { applicationsStore } from '../../stores/Stores';
import ChannelAvatar from '../Channels/ChannelAvatar';
import Label from '../Common/Label';
import MoreMenu from '../Common/MoreMenu';

//@todo visit this again
//@ts-ignore
const useStyles = makeStyles((theme: Theme) => ({
  packageName: {
    fontSize: '1.1em',
  },
  subtitle: {
    fontSize: '.9em',
    textTransform: 'uppercase',
    fontWeight: '300',
    paddingRight: '.05em',
    color: theme.palette.grey['500'],
  },
  packageIcon: {
    minWidth: '40px',
  },
  channelLabel: {
    marginRight: '5px',
  },

import Divider from '@material-ui/core/Divider';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import makeStyles from '@material-ui/styles/makeStyles';
import * as React from 'react';
import { useToggle } from 'uno-react';
import FeatureSample from '../../../components/FeatureSample';
import { ExportButton, PrintButton, SearchText } from '../../../components/Options/Toolbar';
import TableOfContent from '../../../components/TableOfContent';
import featuresStyles from '../../../utils/featuresStyles';
import { exportButtonGrid, printButtonGrid, searchTextGrid } from '../../../utils/toolbarCodeSamples';

const useStyles = makeStyles(featuresStyles);

export default () => {
    const classes = useStyles({});
    const [openExport, toggleOpenExport] = useToggle(false);
    const [openPrint, toggleOpenPrint] = useToggle(false);
    const [openSearch, toggleOpenSearch] = useToggle(false);

    const links = ['ExportButton', 'PrintButton', 'SearchText'];
    const path = '/tubular-react/features/toolbar#';
    const exportDescription = `You can add a export button to the grid's toolbar. It will let you to export your data to a CSV file`;

    const printDescription = `If you need your grid to be printable, it's easy, you just need to add the printButton property as true in your
    toolbarOptions object. The title of the document will be the gridName defined in the component`;

    const searchDescription = `You can also implement a free-text search to your grid, every column defined in your grid with
     the Searchable property will be filtered with this input. This works only on string-type columns`;

import Hr from "../Hr";

export interface ColumnPickerChoice {
  label: string;
  value: string;
}
export interface ColumnPickerContentProps {
  columns: ColumnPickerChoice[];
  selectedColumns: string[];
  onCancel: () => void;
  onColumnToggle: (column: string) => void;
  onReset: () => void;
  onSave: () => void;
}

const useStyles = makeStyles((theme: Theme) => ({
  actionBar: {
    display: "flex",
    justifyContent: "space-between"
  },
  actionBarContainer: {
    boxShadow: `0px 0px 0px 0px ${theme.palette.background.paper}`,
    transition: theme.transitions.duration.short + "ms"
  },
  content: {
    display: "grid",
    gridColumnGap: theme.spacing.unit * 3,
    gridTemplateColumns: "repeat(3, 1fr)",
    maxHeight: 256,
    overflowX: "visible",
    overflowY: "scroll",
    padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit * 3}px`

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

interface ChannelAvatarProps {
  backgroundColor?: string;
  color?: string;
  size?: string | number;
  children?: React.ReactNode;
}

const useStyles = makeStyles((theme: Theme) => ({
  colorAvatar: (props: ChannelAvatarProps) => ({
    color: '#fff',
    backgroundColor: props.backgroundColor || props.color || theme.palette.secondary.main,
    width: props.size,
    height: props.size,
    display: 'inline-flex',
  }),
}));

export default function ChannelAvatar(props: ChannelAvatarProps) {
  const classes = useStyles(props);

  return {props.children || ''};
}