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

import 'date-fns';
import React from 'react';
import Grid from '@material-ui/core/Grid';
import { makeStyles, createStyles } from '@material-ui/core/styles';
import DateFnsUtils from '@date-io/date-fns';
import { MuiPickersUtilsProvider, TimePicker, DatePicker } from 'material-ui-pickers';

const useStyles = makeStyles(
  createStyles({
    grid: {
      width: '60%',
    },
  }),
);

function MaterialUIPickers() {
  // The first commit of Material-UI
  const [selectedDate, setSelectedDate] = React.useState(new Date('2014-08-18T21:11:54'));
  const classes = useStyles();

  function handleDateChange(date: Date) {
    setSelectedDate(date);
  }

  return (

import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogTitle from "@material-ui/core/DialogTitle";
import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
import React from "react";

import AddressEdit from "@saleor/components/AddressEdit";
import ConfirmButton, {
  ConfirmButtonTransitionState
} from "@saleor/components/ConfirmButton";
import Form from "@saleor/components/Form";
import { AddressTypeInput } from "../../../customers/types";
import i18n from "../../../i18n";
import { UserError } from "../../../types";

const styles = createStyles({
  overflow: {
    overflowY: "visible"
  }
});

interface OrderAddressEditDialogProps extends WithStyles {
  confirmButtonState: ConfirmButtonTransitionState;
  address: AddressTypeInput;
  open: boolean;
  errors: UserError[];
  variant: "billing" | "shipping" | string;
  countries?: Array<{
    code: string;
    label: string;
  }>;
  onClose();

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 React from "react";

import AppHeader from "@saleor/components/AppHeader";
import { Container } from "@saleor/components/Container";
import Grid from "@saleor/components/Grid";
import PageHeader from "@saleor/components/PageHeader";
import Skeleton from "@saleor/components/Skeleton";
import i18n from "../../../i18n";
import { maybe, renderCollection, translatedTaxRates } from "../../../misc";
import { CountryList_shop_countries_vat_reducedRates } from "../../types/CountryList";

const styles = createStyles({
  wideColumn: {
    width: "80%"
  }
});

export interface CountryTaxesPageProps {
  countryName: string;
  taxCategories: CountryList_shop_countries_vat_reducedRates[];
  onBack: () => void;
}

const CountryTaxesPage = withStyles(styles, { name: "CountryTaxesPage" })(
  ({
    classes,
    countryName,
    taxCategories,

import { AltinnAppTheme } from 'altinn-shared/theme';
import { getLanguageFromKey, returnUrlToMessagebox } from 'altinn-shared/utils';
import { IProfile } from 'altinn-shared/types';
import { returnUrlToAllSchemas, returnUrlToProfile } from 'altinn-shared/utils/urlHelper';
import { renderParty } from '../resources/utils/party';

export interface IHeaderProps {
  classes: any;
  language: any;
  profile: IProfile;
  type?: string;
}

const theme = createMuiTheme(AltinnAppTheme);

const styles = createStyles({
  appBarWrapper: {
    flexGrow: 1,
    '& header': {
      boxShadow: 'none',
    },
  },
  blueDark: {
    color: AltinnAppTheme.altinnPalette.primary.blueDark,
  },
  blueDarker: {
    color: AltinnAppTheme.altinnPalette.primary.blueDarker,
  },
  default: {
    backgroundColor: 'transparent',
  },
  headerLink: {

import * as React from "react";
import { withStyles, createStyles } from "@material-ui/core/styles";

import * as logo from "../assets/logo.png";

const styles = createStyles({
    logo: {
        width: 100,
    },
    "@keyframes spin": {
        from: {
            transform: "rotate(0deg)",
        },
        to: {
            transform: "rotate(360deg)",
        },
    },
    "@keyframes bounce": {
        from: {
            transform: "translateY(0)",
        },
        to: {

import { createStyles } from '@material-ui/core/styles';
import withStyles, { WithStyles } from '@material-ui/core/styles/withStyles';
import { isEmpty } from 'lodash';
import * as React from 'react';
import { connect } from 'react-redux';
import { Dispatch } from 'redux';
import * as actions from '../../actions/issuer';
import * as networkActions from '../../actions/network';
import arrowSvg from '../../assets/arrow.svg';
import { COLORS } from '../../constants/colors';
import { IE2SRequest, IS2ERequest, IStoreState } from '../../reducers/issuer';
import { IAction } from '../../utils/general';
import SummaryCard from '../common/SummaryCard';

const styles = createStyles({
  row: {
    width: 'calc(95% - 4rem)',
    padding: '0.8rem 2rem',
    display: 'grid',
    gridTemplateColumns: '1.5fr 2fr 0.5fr 2fr 2fr',
  },
  titleRow: {
    width: '100%',
    borderBottom: `1px solid ${COLORS.veryLightGrey}`,
  },
  centered: {
    color: COLORS.grey,
    alignSelf: 'center',
    justifySelf: 'center',
  },
  fullLength: {

export interface CustomerAddressDialogProps {
  address: CustomerAddresses_user_addresses;
  confirmButtonState: ConfirmButtonTransitionState;
  countries: Array<{
    code: string;
    label: string;
  }>;
  errors: UserError[];
  open: boolean;
  variant: "create" | "edit";
  onClose: () => void;
  onConfirm: (data: AddressInput) => void;
}

const styles = createStyles({
  overflow: {
    overflowY: "visible"
  }
});

const CustomerAddressDialog = withStyles(styles, {})(
  ({
    address,
    classes,
    confirmButtonState,
    countries,
    errors,
    open,
    variant,
    onClose,
    onConfirm

import * as actions from '../actions/network';
import RoleContext from '../components/common/RoleContext';
import HistoryList from '../components/issuer/HistoryList';
import Box from '../components/layout/Box';
import PageBox from '../components/layout/PageBox';
import PageContainer from '../components/layout/PageContainer';
import PageTitle from '../components/layout/PageTitle';
import withTracker from '../components/WithTracker';
import { COLORS } from '../constants/colors';
import { ROLES } from '../constants/general';
import { initialState, IStoreState } from '../reducers/network';
import { calEthTodaySwapNo, calStellarTodaySwapNo, IAction } from '../utils/general';
import HistorySwapDetailsPage from './HistorySwapDetailsPage';

const styles = createStyles({
  row: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: '100%',
  },
  boxConstraint: {
    width: '40%',
  },
  thinText: {
    color: COLORS.grey,
    fontSize: '1.5rem',
    fontWeight: 100,
    margin: '1rem 0 2rem 0',
  },
  thinSmallText: {

import Button from "@material-ui/core/Button";
import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
import Toolbar from "@material-ui/core/Toolbar";
import React from "react";

import i18n from "../../i18n";

const styles = createStyles({
  cardActions: {
    flexDirection: "row-reverse" as "row-reverse"
  }
});

interface FormActionsProps extends WithStyles {
  submitLabel: string;
  onCancel?();
  onSubmit?(event: React.FormEvent);
}

const FormActions = withStyles(styles, { name: "FormActions" })(
  ({ classes, onCancel, onSubmit, submitLabel }: FormActionsProps) => (

import classnames from "classnames";

import { DuplicantContainer, Hair, Head, Eyes } from "react-oni-duplicant";

import { createStyles, withStyles } from "@material-ui/core/styles";

export interface HeadPortraitProps {
  className?: string;
  clickable?: boolean;
  hairOrdinal: number;
  headOrdinal: number;
  eyesOrdinal: number;
  onClick?(e: React.MouseEvent): void;
}

const styles = createStyles({
  portraitContainer: {
    position: "relative",
    width: 110,
    height: 100
  },
  portrait: {
    position: "absolute",
    top: 85,
    left: 56,
    width: 250,
    height: 250,
    transform: "scale(.4)",
    transformOrigin: "top left"
  },
  clickable: {
    cursor: "pointer"