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

/>
    
  );
};

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 CardContent from "@material-ui/core/CardContent";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";
import { FormHelperText } from "@material-ui/core";
import { LoginEntity, createEmptyLogin } from "../model/login";
import { isValidLogin } from "../api/login";
import { NotificationComponent } from "../common";
import {
  LoginFormErrors,
  createDefaultLoginFormErrors
} from "./loginPage.viewmodel";
import { loginFormValidation } from "./loginPage.validation";
import { TextFieldForm, SessionContext } 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 loginContext = React.useContext(SessionContext);

  const [loginInfo, setLoginInfo] = React.useState(
    createEmptyLogin()
  );