Update @material-ui to v4

package-lock.json

@@ -20308,9 +20308,9 @@
       "dev": true
     },
     "typescript": {
-      "version": "3.5.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.5.3.tgz",
-      "integrity": "sha512-ACzBtm/PhXBDId6a6sDJfroT2pOWt/oOnk4/dElG5G33ZL776N3Y6/6bKZJBFpd+b05F3Ct9qDjMeJmRWtE2/g=="
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.7.2.tgz",
+      "integrity": "sha512-ml7V7JfiN2Xwvcer+XAf2csGO1bPBdRbFCkYBczNZggrBZ9c7G3riSUeJmqEU5uOtXNPMhE3n+R4FA/3YOAWOQ=="
     },
     "ua-parser-js": {
       "version": "0.7.20",

package.json

@@ -62,7 +62,7 @@
     "react-sortable-tree": "^2.6.2",
     "react-svg": "^2.2.11",
     "slugify": "^1.3.4",
-    "typescript": "^3.5.3",
+    "typescript": "^3.6.4",
     "url-join": "^4.0.1",
     "use-react-router": "^1.0.7"
   },

src/attributes/components/AttributeBulkDeleteDialog/index.ts

@@ -1,2 +1,2 @@
-export { default } from './AttributeBulkDeleteDialog';
-export * from './AttributeBulkDeleteDialog';
+export { default } from "./AttributeBulkDeleteDialog";
+export * from "./AttributeBulkDeleteDialog";

src/attributes/components/AttributeDeleteDialog/index.ts

@@ -1,2 +1,2 @@
-export { default } from './AttributeDeleteDialog';
-export * from './AttributeDeleteDialog';
+export { default } from "./AttributeDeleteDialog";
+export * from "./AttributeDeleteDialog";

src/attributes/components/AttributeDetails/index.ts

@@ -1,2 +1,2 @@
-export { default } from './AttributeDetails';
-export * from './AttributeDetails';
+export { default } from "./AttributeDetails";
+export * from "./AttributeDetails";

src/attributes/components/AttributeList/index.ts

@@ -1,2 +1,2 @@
-export { default } from './AttributeList';
-export * from './AttributeList';
+export { default } from "./AttributeList";
+export * from "./AttributeList";

src/attributes/components/AttributeListPage/index.ts

@@ -1,2 +1,2 @@
-export { default } from './AttributeListPage';
-export * from './AttributeListPage';
+export { default } from "./AttributeListPage";
+export * from "./AttributeListPage";

src/attributes/components/AttributePage/index.ts

@@ -1,2 +1,2 @@
-export { default } from './AttributePage';
-export * from './AttributePage';
+export { default } from "./AttributePage";
+export * from "./AttributePage";

src/attributes/components/AttributeProperties/index.ts

@@ -1,2 +1,2 @@
-export { default } from './AttributeProperties';
-export * from './AttributeProperties';
+export { default } from "./AttributeProperties";
+export * from "./AttributeProperties";

src/attributes/components/AttributeValueDeleteDialog/index.ts

@@ -1,2 +1,2 @@
-export { default } from './AttributeValueDeleteDialog';
-export * from './AttributeValueDeleteDialog';
+export { default } from "./AttributeValueDeleteDialog";
+export * from "./AttributeValueDeleteDialog";

src/attributes/components/AttributeValueEditDialog/index.ts

@@ -1,2 +1,2 @@
-export { default } from './AttributeValueEditDialog';
-export * from './AttributeValueEditDialog';
+export { default } from "./AttributeValueEditDialog";
+export * from "./AttributeValueEditDialog";

src/attributes/components/AttributeValues/index.ts

@@ -1,2 +1,2 @@
-export { default } from './AttributeValues';
-export * from './AttributeValues';
+export { default } from "./AttributeValues";
+export * from "./AttributeValues";

src/auth/components/LoginLoading/LoginLoading.tsx

@@ -1,21 +1,26 @@
 import CircularProgress from "@material-ui/core/CircularProgress";
-import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import React from "react";
 
-const styles = createStyles({
+const useStyles = makeStyles(
+  {
     root: {
       alignItems: "center",
       display: "flex",
       height: "100vh",
       justifyContent: "center"
     }
-});
-const LoginLoading = withStyles(styles, { name: "LoginLoading" })(
-  ({ classes }: WithStyles<typeof styles>) => (
+  },
+  { name: "LoginLoading" }
+);
+const LoginLoading: React.FC = props => {
+  const classes = useStyles(props);
+
+  return (
     <div className={classes.root}>
       <CircularProgress size={128} />
     </div>
-  )
   );
+};
 LoginLoading.displayName = "LoginLoading";
 export default LoginLoading;

src/auth/components/LoginPage/LoginPage.tsx

@@ -1,10 +1,5 @@
 import Button from "@material-ui/core/Button";
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import Typography from "@material-ui/core/Typography";
 import React from "react";
@@ -19,8 +14,8 @@ export interface FormData {
   password: string;
 }
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(
+  theme => ({
     buttonContainer: {
       display: "flex",
       justifyContent: "flex-end"
@@ -42,23 +37,21 @@ const styles = theme =>
       marginBottom: theme.spacing(3),
       padding: theme.spacing(1.5)
     }
-  });
+  }),
+  { name: "LoginCard" }
+);
 
-export interface LoginCardProps extends WithStyles<typeof styles> {
+export interface LoginCardProps {
   error: boolean;
   disableLoginButton: boolean;
   onPasswordRecovery: () => void;
   onSubmit?(event: FormData);
 }
 
-const LoginCard = withStyles(styles, { name: "LoginCard" })(
-  ({
-    classes,
-    error,
-    disableLoginButton,
-    onPasswordRecovery,
-    onSubmit
-  }: LoginCardProps) => {
+const LoginCard: React.FC<LoginCardProps> = props => {
+  const { error, disableLoginButton, onPasswordRecovery, onSubmit } = props;
+
+  const classes = useStyles(props);
   const intl = useIntl();
 
   return (
@@ -124,7 +117,6 @@ const LoginCard = withStyles(styles, { name: "LoginCard" })(
       )}
     </Form>
   );
-  }
-);
+};
 LoginCard.displayName = "LoginCard";
 export default LoginCard;

src/auth/misc.ts

@@ -1,4 +1,4 @@
-import { PermissionEnum } from '../types/globalTypes'
+import { PermissionEnum } from "../types/globalTypes";
 import { User } from "./types/User";
 
 export const hasPermission = (permission: PermissionEnum, user: User) =>

src/categories/components/CategoryDeleteDialog/CategoryDeleteDialog.tsx

@@ -4,19 +4,14 @@ import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogContentText from "@material-ui/core/DialogContentText";
 import DialogTitle from "@material-ui/core/DialogTitle";
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
 import { buttonMessages } from "@saleor/intl";
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(
+  theme => ({
     deleteButton: {
       "&:hover": {
         backgroundColor: theme.palette.error.main
@@ -24,18 +19,25 @@ const styles = theme =>
       backgroundColor: theme.palette.error.main,
       color: theme.palette.error.contrastText
     }
-  });
+  }),
+  {
+    name: "CategoryDeleteDialog"
+  }
+);
 
-export interface CategoryDeleteDialogProps extends WithStyles<typeof styles> {
+export interface CategoryDeleteDialogProps {
   open: boolean;
   name: string;
   onClose();
   onConfirm();
 }
 
-const CategoryDeleteDialog = withStyles(styles, {
-  name: "CategoryDeleteDialog"
-})(({ classes, name, open, onConfirm, onClose }: CategoryDeleteDialogProps) => (
+const CategoryDeleteDialog: React.FC<CategoryDeleteDialogProps> = props => {
+  const { name, open, onConfirm, onClose } = props;
+
+  const classes = useStyles(props);
+
+  return (
     <Dialog onClose={onClose} open={open}>
       <DialogTitle>
         <FormattedMessage
@@ -67,6 +69,8 @@ const CategoryDeleteDialog = withStyles(styles, {
         </Button>
       </DialogActions>
     </Dialog>
-));
+  );
+};
+
 CategoryDeleteDialog.displayName = "CategoryDeleteDialog";
 export default CategoryDeleteDialog;

src/categories/components/CategoryList/CategoryList.tsx

@@ -1,9 +1,4 @@
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
@@ -20,8 +15,8 @@ import TablePagination from "@saleor/components/TablePagination";
 import { maybe, renderCollection } from "@saleor/misc";
 import { ListActions, ListProps } from "@saleor/types";
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(
+  theme => ({
     [theme.breakpoints.up("lg")]: {
       colName: {
         width: 840
@@ -45,7 +40,9 @@ const styles = theme =>
     tableRow: {
       cursor: "pointer"
     }
-  });
+  }),
+  { name: "CategoryList" }
+);
 
 interface CategoryListProps extends ListProps, ListActions {
   categories?: CategoryFragment[];
@@ -55,10 +52,9 @@ interface CategoryListProps extends ListProps, ListActions {
 
 const numberOfColumns = 4;
 
-const CategoryList = withStyles(styles, { name: "CategoryList" })(
-  ({
+const CategoryList: React.FC<CategoryListProps> = props => {
+  const {
     categories,
-    classes,
     disabled,
     settings,
     pageInfo,
@@ -72,7 +68,11 @@ const CategoryList = withStyles(styles, { name: "CategoryList" })(
     onPreviousPage,
     onUpdateListSettings,
     onRowClick
-  }: CategoryListProps & WithStyles<typeof styles>) => (
+  } = props;
+
+  const classes = useStyles(props);
+
+  return (
     <Table>
       <TableHead
         colSpan={numberOfColumns}
@@ -175,7 +175,8 @@ const CategoryList = withStyles(styles, { name: "CategoryList" })(
         )}
       </TableBody>
     </Table>
-  )
   );
+};
+
 CategoryList.displayName = "CategoryList";
 export default CategoryList;

src/categories/components/CategoryProductList/CategoryProductList.tsx

@@ -1,9 +1,4 @@
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
@@ -25,8 +20,8 @@ import { ListActions, ListProps } from "@saleor/types";
 import React from "react";
 import { CategoryDetails_category_products_edges_node } from "../../types/CategoryDetails";
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(
+  theme => ({
     [theme.breakpoints.up("lg")]: {
       colName: {
         width: "auto"
@@ -69,20 +64,20 @@ const styles = theme =>
     textRight: {
       textAlign: "right"
     }
-  });
+  }),
+  {
+    name: "CategoryProductList"
+  }
+);
 
-interface CategoryProductListProps
-  extends ListProps,
-    ListActions,
-    WithStyles<typeof styles> {
+interface CategoryProductListProps extends ListProps, ListActions {
   products: CategoryDetails_category_products_edges_node[];
 }
 
-export const CategoryProductList = withStyles(styles, {
-  name: "CategoryProductList"
-})(
-  ({
-    classes,
+export const CategoryProductList: React.FC<
+  CategoryProductListProps
+> = props => {
+  const {
     disabled,
     isChecked,
     pageInfo,
@@ -94,7 +89,9 @@ export const CategoryProductList = withStyles(styles, {
     onNextPage,
     onPreviousPage,
     onRowClick
-  }: CategoryProductListProps) => {
+  } = props;
+
+  const classes = useStyles(props);
   const intl = useIntl();
 
   const numberOfColumns = 5;
@@ -145,9 +142,7 @@ export const CategoryProductList = withStyles(styles, {
           <TableRow>
             <TablePagination
               colSpan={numberOfColumns}
-                hasNextPage={
-                  pageInfo && !disabled ? pageInfo.hasNextPage : false
-                }
+              hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
               onNextPage={onNextPage}
               hasPreviousPage={
                 pageInfo && !disabled ? pageInfo.hasPreviousPage : false
@@ -237,7 +232,7 @@ export const CategoryProductList = withStyles(styles, {
       </Table>
     </div>
   );
-  }
-);
+};
+
 CategoryProductList.displayName = "CategoryProductList";
 export default CategoryProductList;

src/collections/components/CollectionImage/CollectionImage.tsx

@@ -1,9 +1,4 @@
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -19,8 +14,8 @@ import Skeleton from "@saleor/components/Skeleton";
 import { commonMessages } from "@saleor/intl";
 import { CollectionDetails_collection_backgroundImage } from "../../types/CollectionDetails";
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(
+  theme => ({
     PhotosIcon: {
       height: "64px",
       margin: "0 auto",
@@ -50,7 +45,11 @@ const styles = theme =>
       position: "relative",
       width: 148
     }
-  });
+  }),
+  {
+    name: "CollectionImage"
+  }
+);
 
 export interface CollectionImageProps {
   data: {
@@ -62,16 +61,11 @@ export interface CollectionImageProps {
   onImageUpload: (file: File) => void;
 }
 
-export const CollectionImage = withStyles(styles)(
-  ({
-    classes,
-    data,
-    onImageUpload,
-    image,
-    onChange,
-    onImageDelete
-  }: CollectionImageProps & WithStyles<typeof styles>) => {
+export const CollectionImage: React.FC<CollectionImageProps> = props => {
+  const { data, onImageUpload, image, onChange, onImageDelete } = props;
+
   const anchor = React.useRef<HTMLInputElement>();
+  const classes = useStyles(props);
   const intl = useIntl();
 
   const handleImageUploadButtonClick = () => anchor.current.click();
@@ -138,7 +132,7 @@ export const CollectionImage = withStyles(styles)(
       )}
     </Card>
   );
-  }
-);
+};
+
 CollectionImage.displayName = "CollectionImage";
 export default CollectionImage;

src/collections/components/CollectionList/CollectionList.tsx

@@ -1,9 +1,4 @@
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
@@ -21,8 +16,8 @@ import { maybe, renderCollection } from "@saleor/misc";
 import { ListActions, ListProps } from "@saleor/types";
 import { CollectionList_collections_edges_node } from "../../types/CollectionList";
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(
+  theme => ({
     [theme.breakpoints.up("lg")]: {
       colAvailability: {
         width: 240
@@ -42,20 +37,18 @@ const styles = theme =>
     tableRow: {
       cursor: "pointer" as "pointer"
     }
-  });
+  }),
+  { name: "CollectionList" }
+);
 
-interface CollectionListProps
-  extends ListProps,
-    ListActions,
-    WithStyles<typeof styles> {
+interface CollectionListProps extends ListProps, ListActions {
   collections: CollectionList_collections_edges_node[];
 }
 
 const numberOfColumns = 5;
 
-const CollectionList = withStyles(styles, { name: "CollectionList" })(
-  ({
-    classes,
+const CollectionList: React.FC<CollectionListProps> = props => {
+  const {
     collections,
     disabled,
     settings,
@@ -69,7 +62,9 @@ const CollectionList = withStyles(styles, { name: "CollectionList" })(
     toggle,
     toggleAll,
     toolbar
-  }: CollectionListProps) => {
+  } = props;
+
+  const classes = useStyles(props);
   const intl = useIntl();
 
   return (
@@ -134,10 +129,7 @@ const CollectionList = withStyles(styles, { name: "CollectionList" })(
                   />
                 </TableCell>
                 <TableCell className={classes.colName} data-tc="name">
-                    {maybe<React.ReactNode>(
-                      () => collection.name,
-                      <Skeleton />
-                    )}
+                  {maybe<React.ReactNode>(() => collection.name, <Skeleton />)}
                 </TableCell>
                 <TableCell className={classes.colProducts}>
                   {maybe<React.ReactNode>(
@@ -184,7 +176,7 @@ const CollectionList = withStyles(styles, { name: "CollectionList" })(
       </TableBody>
     </Table>
   );
-  }
-);
+};
+
 CollectionList.displayName = "CollectionList";
 export default CollectionList;

src/collections/components/CollectionProducts/CollectionProducts.tsx

@@ -1,12 +1,7 @@
 import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import IconButton from "@material-ui/core/IconButton";
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
@@ -29,8 +24,8 @@ import { maybe, renderCollection } from "../../../misc";
 import { ListActions, PageListProps } from "../../../types";
 import { CollectionDetails_collection } from "../../types/CollectionDetails";
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(
+  theme => ({
     colActions: {
       "&:last-child": {
         paddingRight: 0
@@ -56,21 +51,19 @@ const styles = theme =>
     tableRow: {
       cursor: "pointer"
     }
-  });
+  }),
+  { name: "CollectionProducts" }
+);
 
-export interface CollectionProductsProps
-  extends PageListProps,
-    ListActions,
-    WithStyles<typeof styles> {
+export interface CollectionProductsProps extends PageListProps, ListActions {
   collection: CollectionDetails_collection;
   onProductUnassign: (id: string, event: React.MouseEvent<any>) => void;
 }
 
 const numberOfColumns = 5;
 
-const CollectionProducts = withStyles(styles, { name: "CollectionProducts" })(
-  ({
-    classes,
+const CollectionProducts: React.FC<CollectionProductsProps> = props => {
+  const {
     collection,
     disabled,
     onAdd,
@@ -84,7 +77,9 @@ const CollectionProducts = withStyles(styles, { name: "CollectionProducts" })(
     toggle,
     toggleAll,
     toolbar
-  }: CollectionProductsProps) => {
+  } = props;
+
+  const classes = useStyles(props);
   const intl = useIntl();
 
   return (
@@ -124,9 +119,7 @@ const CollectionProducts = withStyles(styles, { name: "CollectionProducts" })(
           colSpan={numberOfColumns}
           selected={selected}
           disabled={disabled}
-            items={maybe(() =>
-              collection.products.edges.map(edge => edge.node)
-            )}
+          items={maybe(() => collection.products.edges.map(edge => edge.node))}
           toggleAll={toggleAll}
           toolbar={toolbar}
         >
@@ -242,7 +235,7 @@ const CollectionProducts = withStyles(styles, { name: "CollectionProducts" })(
       </Table>
     </Card>
   );
-  }
-);
+};
+
 CollectionProducts.displayName = "CollectionProducts";
 export default CollectionProducts;

src/components/AccountPermissions/AccountPermissions.tsx

@@ -1,11 +1,6 @@
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -15,21 +10,23 @@ import { ControlledCheckbox } from "@saleor/components/ControlledCheckbox";
 import { ShopInfo_shop_permissions } from "@saleor/components/Shop/types/ShopInfo";
 import Skeleton from "@saleor/components/Skeleton";
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(
+  theme => ({
     checkboxContainer: {
       marginTop: theme.spacing()
     },
     hr: {
-      backgroundColor: theme.overrides.MuiCard.root.borderColor,
+      backgroundColor: theme.palette.divider,
       border: "none",
       height: 1,
       marginBottom: 0,
       marginTop: 0
     }
-  });
+  }),
+  { name: "AccountPermissions" }
+);
 
-interface AccountPermissionsProps extends WithStyles<typeof styles> {
+interface AccountPermissionsProps {
   permissions: ShopInfo_shop_permissions[];
   data: {
     hasFullAccess: boolean;
@@ -39,14 +36,10 @@ interface AccountPermissionsProps extends WithStyles<typeof styles> {
   onChange: (event: React.ChangeEvent<any>, cb?: () => void) => void;
 }
 
-const AccountPermissions = withStyles(styles, { name: "AccountPermissions" })(
-  ({
-    classes,
-    data,
-    disabled,
-    permissions,
-    onChange
-  }: AccountPermissionsProps) => {
+const AccountPermissions: React.FC<AccountPermissionsProps> = props => {
+  const { data, disabled, permissions, onChange } = props;
+
+  const classes = useStyles(props);
   const intl = useIntl();
 
   const handleFullAccessChange = (event: React.ChangeEvent<any>) =>
@@ -121,7 +114,7 @@ const AccountPermissions = withStyles(styles, { name: "AccountPermissions" })(
       )}
     </Card>
   );
-  }
-);
+};
+
 AccountPermissions.displayName = "AccountPermissions";
 export default AccountPermissions;

src/components/ActionDialog/ActionDialog.tsx

@@ -3,12 +3,7 @@ import Dialog from "@material-ui/core/Dialog";
 import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import classNames from "classnames";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -18,8 +13,8 @@ import ConfirmButton, {
   ConfirmButtonTransitionState
 } from "../ConfirmButton/ConfirmButton";
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(
+  theme => ({
     deleteButton: {
       "&:hover": {
         backgroundColor: theme.palette.error.main
@@ -27,9 +22,11 @@ const styles = theme =>
       backgroundColor: theme.palette.error.main,
       color: theme.palette.error.contrastText
     }
-  });
+  }),
+  { name: "ActionDialog" }
+);
 
-interface ActionDialogProps extends WithStyles<typeof styles> {
+interface ActionDialogProps {
   children?: React.ReactNode;
   confirmButtonLabel?: string;
   confirmButtonState: ConfirmButtonTransitionState;
@@ -40,10 +37,9 @@ interface ActionDialogProps extends WithStyles<typeof styles> {
   onConfirm();
 }
 
-const ActionDialog = withStyles(styles, { name: "ActionDialog" })(
-  ({
+const ActionDialog: React.FC<ActionDialogProps> = props => {
+  const {
     children,
-    classes,
     confirmButtonLabel,
     confirmButtonState,
     open,
@@ -51,7 +47,9 @@ const ActionDialog = withStyles(styles, { name: "ActionDialog" })(
     variant,
     onConfirm,
     onClose
-  }: ActionDialogProps) => {
+  } = props;
+
+  const classes = useStyles(props);
   const intl = useIntl();
 
   return (
@@ -79,7 +77,7 @@ const ActionDialog = withStyles(styles, { name: "ActionDialog" })(
       </DialogActions>
     </Dialog>
   );
-  }
-);
+};
+
 ActionDialog.displayName = "ActionDialog";
 export default ActionDialog;

src/components/AddressEdit/AddressEdit.tsx

@@ -1,9 +1,4 @@
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import React from "react";
 import { useIntl } from "react-intl";
@@ -16,16 +11,15 @@ import SingleAutocompleteSelectField, {
   SingleAutocompleteChoiceType
 } from "../SingleAutocompleteSelectField";
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => ({
   root: {
     display: "grid",
     gridColumnGap: theme.spacing(2),
     gridTemplateColumns: "1fr 1fr"
   }
-  });
+}));
 
-interface AddressEditProps extends WithStyles<typeof styles> {
+interface AddressEditProps {
   countries: SingleAutocompleteChoiceType[];
   countryDisplayValue: string;
   data: AddressTypeInput;
@@ -35,9 +29,8 @@ interface AddressEditProps extends WithStyles<typeof styles> {
   onCountryChange(event: React.ChangeEvent<any>);
 }
 
-const AddressEdit = withStyles(styles, { name: "AddressEdit" })(
-  ({
-    classes,
+const AddressEdit: React.FC<AddressEditProps> = props => {
+  const {
     countries,
     countryDisplayValue,
     data,
@@ -45,7 +38,9 @@ const AddressEdit = withStyles(styles, { name: "AddressEdit" })(
     errors,
     onChange,
     onCountryChange
-  }: AddressEditProps) => {
+  } = props;
+  const classes = useStyles(props);
+
   const intl = useIntl();
 
   return (
@@ -202,7 +197,6 @@ const AddressEdit = withStyles(styles, { name: "AddressEdit" })(
       </div>
     </>
   );
-  }
-);
+};
 AddressEdit.displayName = "AddressEdit";
 export default AddressEdit;

src/components/AppHeader/AppHeader.tsx

@@ -1,10 +1,5 @@
 import Portal from "@material-ui/core/Portal";
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 import ArrowBackIcon from "@material-ui/icons/ArrowBack";
 import React from "react";
@@ -16,8 +11,7 @@ export interface AppHeaderProps {
   onBack();
 }
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => ({
   backArrow: {
     fontSize: 30
   },
@@ -48,13 +42,13 @@ const styles = theme =>
     marginLeft: theme.spacing(),
     textTransform: "uppercase"
   }
-  });
-const AppHeader = withStyles(styles, { name: "AppHeader" })(
-  ({
-    children,
-    classes,
-    onBack
-  }: AppHeaderProps & WithStyles<typeof styles>) => (
+}));
+const AppHeader: React.FC<AppHeaderProps> = props => {
+  const { children, onBack } = props;
+
+  const classes = useStyles(props);
+
+  return (
     <AppHeaderContext.Consumer>
       {anchor =>
         anchor ? (
@@ -71,7 +65,7 @@ const AppHeader = withStyles(styles, { name: "AppHeader" })(
         ) : null
       }
     </AppHeaderContext.Consumer>
-  )
   );
+};
 AppHeader.displayName = "AppHeader";
 export default AppHeader;

src/components/AppHeader/index.ts

@@ -1,2 +1,2 @@
-export { default } from './AppHeader';
-export * from './AppHeader';
+export { default } from "./AppHeader";
+export * from "./AppHeader";

src/components/AppLayout/AppLayout.tsx

@@ -8,7 +8,7 @@ import MenuItem from "@material-ui/core/MenuItem";
 import Menu from "@material-ui/core/MenuList";
 import Paper from "@material-ui/core/Paper";
 import Popper from "@material-ui/core/Popper";
-import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import classNames from "classnames";
 import React from "react";
 import SVG from "react-inlinesvg";
@@ -36,8 +36,8 @@ import createMenuStructure from "./menuStructure";
 import ResponsiveDrawer from "./ResponsiveDrawer";
 import ThemeSwitch from "./ThemeSwitch";
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(
+  theme => ({
     appAction: {
       [theme.breakpoints.down("sm")]: {
         left: 0,
@@ -263,23 +263,19 @@ const styles = theme =>
     viewContainer: {
       minHeight: `calc(100vh - ${theme.spacing(2) + appLoaderHeight + 70}px)`
     }
-  });
+  }),
+  {
+    name: "AppLayout"
+  }
+);
 
 interface AppLayoutProps {
   children: React.ReactNode;
 }
 
-const AppLayout = withStyles(styles, {
-  name: "AppLayout"
-})(
-  withRouter<AppLayoutProps & RouteComponentProps<any>, any>(
-    ({
-      classes,
-      children,
-      location
-    }: AppLayoutProps &
-      WithStyles<typeof styles> &
-      RouteComponentProps<any>) => {
+const AppLayout = withRouter<AppLayoutProps & RouteComponentProps<any>, any>(
+  ({ children, location }: AppLayoutProps & RouteComponentProps<any>) => {
+    const classes = useStyles({});
     const { isDark, toggleTheme } = useTheme();
     const [isMenuSmall, setMenuSmall] = useLocalStorage("isMenuSmall", false);
     const [isDrawerOpened, setDrawerState] = React.useState(false);
@@ -314,10 +310,7 @@ const AppLayout = withStyles(styles, {
       navigate(staffMemberDetailsUrl(user.id));
     };
 
-      const handleMenuItemClick = (
-        url: string,
-        event: React.MouseEvent<any>
-      ) => {
+    const handleMenuItemClick = (url: string, event: React.MouseEvent<any>) => {
       event.stopPropagation();
       event.preventDefault();
       setDrawerState(false);
@@ -347,9 +340,7 @@ const AppLayout = withStyles(styles, {
                       })}
                     >
                       <SVG
-                          src={
-                            isMenuSmall ? saleorDarkLogoSmall : saleorDarkLogo
-                          }
+                        src={isMenuSmall ? saleorDarkLogoSmall : saleorDarkLogo}
                       />
                     </div>
                     <Hidden smDown>
@@ -364,9 +355,7 @@ const AppLayout = withStyles(styles, {
                       </div>
                     </Hidden>
                     <MenuList
-                        className={
-                          isMenuSmall ? classes.menuSmall : classes.menu
-                        }
+                      className={isMenuSmall ? classes.menuSmall : classes.menu}
                       menuItems={menuStructure}
                       isMenuSmall={!isMenuSmall}
                       location={location.pathname}
@@ -420,10 +409,7 @@ const AppLayout = withStyles(styles, {
                               <Chip
                                 avatar={
                                   user.avatar && (
-                                      <Avatar
-                                        alt="user"
-                                        src={user.avatar.url}
-                                      />
+                                    <Avatar alt="user" src={user.avatar.url} />
                                   )
                                 }
                                 className={classes.userChip}
@@ -459,9 +445,7 @@ const AppLayout = withStyles(styles, {
                                   >
                                     <Paper>
                                       <ClickAwayListener
-                                          onClickAway={() =>
-                                            setMenuState(false)
-                                          }
+                                        onClickAway={() => setMenuState(false)}
                                         mouseEvent="onClick"
                                       >
                                         <Menu>
@@ -505,7 +489,6 @@ const AppLayout = withStyles(styles, {
       </AppProgressProvider>
     );
   }
-  )
 );
 
 export default AppLayout;

src/components/AppLayout/MenuList.tsx

@@ -1,9 +1,4 @@
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 import classNames from "classnames";
 import React from "react";
@@ -24,8 +19,7 @@ import { orderDraftListUrl, orderListUrl } from "../../orders/urls";
 import MenuNested from "./MenuNested";
 import { IMenuItem } from "./menuStructure";
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => ({
   menuIcon: {
     "& svg": {
       height: 32,
@@ -159,7 +153,7 @@ const styles = theme =>
   subMenuDrawerOpen: {
     width: `100vw`
   }
-  });
+}));
 
 interface MenuListProps {
   className?: string;
@@ -176,9 +170,8 @@ export interface IActiveSubMenu {
   label: string | null;
 }
 
-const MenuList = withStyles(styles, { name: "MenuList" })(
-  ({
-    classes,
+const MenuList: React.FC<MenuListProps> = props => {
+  const {
     className,
     menuItems,
     isMenuSmall,
@@ -186,7 +179,10 @@ const MenuList = withStyles(styles, { name: "MenuList" })(
     user,
     renderConfigure,
     onMenuItemClick
-  }: MenuListProps & WithStyles<typeof styles>) => {
+  } = props;
+
+  const classes = useStyles(props);
+
   const { isDark } = useTheme();
   const [activeSubMenu, setActiveSubMenu] = React.useState<IActiveSubMenu>({
     isActive: false,
@@ -239,9 +235,7 @@ const MenuList = withStyles(styles, { name: "MenuList" })(
 
         if (
           menuItem.permission &&
-            !user.permissions
-              .map(perm => perm.code)
-              .includes(menuItem.permission)
+          !user.permissions.map(perm => perm.code).includes(menuItem.permission)
         ) {
           return null;
         }
@@ -360,6 +354,7 @@ const MenuList = withStyles(styles, { name: "MenuList" })(
       )}
     </div>
   );
-  }
-);
+};
+
+MenuList.displayName = "MenuList";
 export default MenuList;

src/components/AppLayout/MenuNested.tsx

@@ -1,10 +1,5 @@
 import Hidden from "@material-ui/core/Hidden";
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 import classNames from "classnames";
 import React from "react";
@@ -17,8 +12,7 @@ import { drawerWidthExpanded } from "./consts";
 import { IActiveSubMenu } from "./MenuList";
 import { IMenuItem } from "./menuStructure";
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => ({
   menuListNested: {
     background: theme.palette.background.paper,
     height: "100vh",
@@ -99,7 +93,7 @@ const styles = theme =>
     display: "inline",
     paddingLeft: 10
   }
-  });
+}));
 
 export interface MenuNestedProps {
   activeItem: IActiveSubMenu;
@@ -112,17 +106,19 @@ export interface MenuNestedProps {
   onMenuItemClick: (url: string, event: React.MouseEvent<any>) => void;
 }
 
-const MenuNested = withStyles(styles, { name: "MenuNested" })(
-  ({
+const MenuNested: React.FC<MenuNestedProps> = props => {
+  const {
     activeItem,
     ariaLabel,
-    classes,
+
     closeSubMenu,
     icon,
     menuItem,
     onMenuItemClick,
     title
-  }: MenuNestedProps & WithStyles<typeof styles>) => {
+  } = props;
+  const classes = useStyles(props);
+
   const menuItems = menuItem.children;
   const { isDark } = useTheme();
   const closeMenu = (menuItemUrl, event) => {
@@ -174,8 +170,7 @@ const MenuNested = withStyles(styles, { name: "MenuNested" })(
             </div>
           </Hidden>
         </Typography>
-          {menuItems.map(item => {
-            return (
+        {menuItems.map(item => (
           <a
             className={classNames(classes.menuListNestedItem)}
             href={createHref(item.url)}
@@ -183,15 +178,13 @@ const MenuNested = withStyles(styles, { name: "MenuNested" })(
             onClick={event => closeMenu(item.url, event)}
             key={item.label}
           >
-                <Typography aria-label={item.ariaLabel}>
-                  {item.label}
-                </Typography>
+            <Typography aria-label={item.ariaLabel}>{item.label}</Typography>
           </a>
-            );
-          })}
+        ))}
       </div>
     </>
   );
-  }
-);
+};
+
+MenuNested.displayName = "MenuNested";
 export default MenuNested;

src/components/AppLayout/ResponsiveDrawer.tsx

@@ -1,16 +1,11 @@
 import Drawer from "@material-ui/core/Drawer";
 import Hidden from "@material-ui/core/Hidden";
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import React from "react";
 import { drawerWidth, drawerWidthExpanded } from "./consts";
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(
+  theme => ({
     drawerDesktop: {
       backgroundColor: theme.palette.background.paper,
       border: "none",
@@ -29,17 +24,23 @@ const styles = theme =>
     drawerMobile: {
       width: drawerWidthExpanded
     }
-  });
+  }),
+  { name: "ResponsiveDrawer" }
+);
 
-interface ResponsiveDrawerProps extends WithStyles<typeof styles> {
+interface ResponsiveDrawerProps {
   children?: React.ReactNode;
   open: boolean;
   small: boolean;
   onClose?();
 }
 
-const ResponsiveDrawer = withStyles(styles, { name: "ResponsiveDrawer" })(
-  ({ children, classes, onClose, open, small }: ResponsiveDrawerProps) => (
+const ResponsiveDrawer: React.FC<ResponsiveDrawerProps> = props => {
+  const { children, onClose, open, small } = props;
+
+  const classes = useStyles(props);
+
+  return (
     <>
       <Hidden smDown>
         <Drawer
@@ -63,6 +64,6 @@ const ResponsiveDrawer = withStyles(styles, { name: "ResponsiveDrawer" })(
         </Drawer>
       </Hidden>
     </>
-  )
   );
+};
 export default ResponsiveDrawer;

src/components/AppLayout/ThemeSwitch.tsx

@@ -1,11 +1,12 @@
-import { Theme, withStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import Switch, { SwitchProps } from "@material-ui/core/Switch";
 import React from "react";
 
 import MoonIcon from "../../icons/Moon";
 import SunIcon from "../../icons/Sun";
 
-const switchStyles = theme => ({
+const useStyles = makeStyles(
+  theme => ({
     bar: {
       "$colorPrimary$checked + &": {
         backgroundColor: theme.palette.background.paper
@@ -28,16 +29,24 @@ const switchStyles = theme => ({
       },
       width: 58
     }
-});
-const ThemeSwitch = withStyles(switchStyles, {
+  }),
+  {
     name: "ThemeSwitch"
-})((props: SwitchProps) => (
+  }
+);
+const ThemeSwitch: React.FC<SwitchProps> = props => {
+  const classes = useStyles(props);
+
+  return (
     <Switch
       {...props}
+      classes={classes}
       color="primary"
       icon={<SunIcon />}
       checkedIcon={<MoonIcon />}
     />
-));
+  );
+};
+
 ThemeSwitch.displayName = "ThemeSwitch";
 export default ThemeSwitch;

src/components/AppLayout/index.ts

@@ -1,2 +1,2 @@
-export { default } from './AppLayout';
-export * from './AppLayout';
+export { default } from "./AppLayout";
+export * from "./AppLayout";

src/components/AssignCategoryDialog/AssignCategoryDialog.tsx

@@ -4,7 +4,7 @@ import Dialog from "@material-ui/core/Dialog";
 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 { makeStyles } from "@material-ui/core/styles";
 import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
@@ -27,7 +27,7 @@ export interface FormData {
   query: string;
 }
 
-const styles = createStyles({
+const useStyles = makeStyles({
   avatar: {
     "&:first-child": {
       paddingLeft: 0
@@ -44,7 +44,7 @@ const styles = createStyles({
   }
 });
 
-interface AssignCategoriesDialogProps extends WithStyles<typeof styles> {
+interface AssignCategoriesDialogProps {
   categories: SearchCategories_search_edges_node[];
   confirmButtonState: ConfirmButtonTransitionState;
   open: boolean;
@@ -71,11 +71,8 @@ function handleCategoryAssign(
   }
 }
 
-const AssignCategoriesDialog = withStyles(styles, {
-  name: "AssignCategoriesDialog"
-})(
-  ({
-    classes,
+const AssignCategoriesDialog: React.FC<AssignCategoriesDialogProps> = props => {
+  const {
     confirmButtonState,
     open,
     loading,
@@ -83,7 +80,9 @@ const AssignCategoriesDialog = withStyles(styles, {
     onClose,
     onFetch,
     onSubmit
-  }: AssignCategoriesDialogProps) => {
+  } = props;
+  const classes = useStyles(props);
+
   const intl = useIntl();
   const [query, onQueryChange] = useSearchQuery(onFetch);
   const [selectedCategories, setSelectedCategories] = React.useState<
@@ -178,7 +177,6 @@ const AssignCategoriesDialog = withStyles(styles, {
       </DialogActions>
     </Dialog>
   );
-  }
-);
+};
 AssignCategoriesDialog.displayName = "AssignCategoriesDialog";
 export default AssignCategoriesDialog;

src/components/AssignCollectionDialog/AssignCollectionDialog.tsx

@@ -4,7 +4,7 @@ import Dialog from "@material-ui/core/Dialog";
 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 { makeStyles } from "@material-ui/core/styles";
 import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
@@ -27,7 +27,7 @@ export interface FormData {
   query: string;
 }
 
-const styles = createStyles({
+const useStyles = makeStyles({
   avatar: {
     "&:first-child": {
       paddingLeft: 0
@@ -44,7 +44,7 @@ const styles = createStyles({
   }
 });
 
-interface AssignCollectionDialogProps extends WithStyles<typeof styles> {
+interface AssignCollectionDialogProps {
   collections: SearchCollections_search_edges_node[];
   confirmButtonState: ConfirmButtonTransitionState;
   open: boolean;
@@ -71,11 +71,8 @@ function handleCollectionAssign(
   }
 }
 
-const AssignCollectionDialog = withStyles(styles, {
-  name: "AssignCollectionDialog"
-})(
-  ({
-    classes,
+const AssignCollectionDialog: React.FC<AssignCollectionDialogProps> = props => {
+  const {
     confirmButtonState,
     open,
     loading,
@@ -83,7 +80,9 @@ const AssignCollectionDialog = withStyles(styles, {
     onClose,
     onFetch,
     onSubmit
-  }: AssignCollectionDialogProps) => {
+  } = props;
+  const classes = useStyles(props);
+
   const intl = useIntl();
   const [query, onQueryChange] = useSearchQuery(onFetch);
   const [selectedCollections, setSelectedCollections] = React.useState<
@@ -129,8 +128,7 @@ const AssignCollectionDialog = withStyles(styles, {
             {collections &&
               collections.map(collection => {
                 const isSelected = !!selectedCollections.find(
-                    selectedCollection =>
-                      selectedCollection.id === collection.id
+                  selectedCollection => selectedCollection.id === collection.id
                 );
 
                 return (
@@ -179,7 +177,6 @@ const AssignCollectionDialog = withStyles(styles, {
       </DialogActions>
     </Dialog>
   );
-  }
-);
+};
 AssignCollectionDialog.displayName = "AssignCollectionDialog";
 export default AssignCollectionDialog;

src/components/AssignProductDialog/AssignProductDialog.tsx

@@ -4,7 +4,7 @@ import Dialog from "@material-ui/core/Dialog";
 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 { makeStyles } from "@material-ui/core/styles";
 import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
@@ -29,7 +29,7 @@ export interface FormData {
   query: string;
 }
 
-const styles = createStyles({
+const useStyles = makeStyles({
   avatar: {
     "&:first-child": {
       paddingLeft: 0
@@ -77,11 +77,8 @@ function handleProductAssign(
   }
 }
 
-const AssignProductDialog = withStyles(styles, {
-  name: "AssignProductDialog"
-})(
-  ({
-    classes,
+const AssignProductDialog: React.FC<AssignProductDialogProps> = props => {
+  const {
     confirmButtonState,
     open,
     loading,
@@ -89,7 +86,9 @@ const AssignProductDialog = withStyles(styles, {
     onClose,
     onFetch,
     onSubmit
-  }: AssignProductDialogProps & WithStyles<typeof styles>) => {
+  } = props;
+  const classes = useStyles(props);
+
   const intl = useIntl();
   const [query, onQueryChange] = useSearchQuery(onFetch);
   const [selectedProducts, setSelectedProducts] = React.useState<
@@ -191,7 +190,6 @@ const AssignProductDialog = withStyles(styles, {
       </DialogActions>
     </Dialog>
   );
-  }
-);
+};
 AssignProductDialog.displayName = "AssignProductDialog";
 export default AssignProductDialog;

src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.tsx

@@ -1,12 +1,7 @@
 import CircularProgress from "@material-ui/core/CircularProgress";
 import MenuItem from "@material-ui/core/MenuItem";
 import Paper from "@material-ui/core/Paper";
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import ArrowBack from "@material-ui/icons/ArrowBack";
 import Downshift from "downshift";
@@ -43,14 +38,13 @@ const DebounceAutocomplete: React.ComponentType<
   DebounceProps<string>
 > = Debounce;
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => ({
   container: {
     flexGrow: 1,
     position: "relative"
   },
   menuBack: {
-      marginLeft: -theme.spacing(.5),
+    marginLeft: -theme.spacing(0.5),
     marginRight: theme.spacing(1)
   },
   paper: {
@@ -62,12 +56,9 @@ const styles = theme =>
     zIndex: 2
   },
   root: {}
-  });
-const AutocompleteSelectMenu = withStyles(styles, {
-  name: "AutocompleteSelectMenu"
-})(
-  ({
-    classes,
+}));
+const AutocompleteSelectMenu: React.FC<AutocompleteSelectMenuProps> = props => {
+  const {
     disabled,
     displayValue,
     error,
@@ -79,7 +70,9 @@ const AutocompleteSelectMenu = withStyles(styles, {
     placeholder,
     onChange,
     onInputChange
-  }: AutocompleteSelectMenuProps & WithStyles<typeof styles>) => {
+  } = props;
+  const classes = useStyles(props);
+
   const [inputValue, setInputValue] = React.useState(displayValue || "");
   const [menuPath, setMenuPath] = React.useState<number[]>([]);
 
@@ -189,7 +182,6 @@ const AutocompleteSelectMenu = withStyles(styles, {
       )}
     </DebounceAutocomplete>
   );
-  }
-);
+};
 AutocompleteSelectMenu.displayName = "AutocompleteSelectMenu";
 export default AutocompleteSelectMenu;

src/components/AutocompleteSelectMenu/index.ts

@@ -1,2 +1,2 @@
-export { default } from './AutocompleteSelectMenu';
-export * from './AutocompleteSelectMenu';
+export { default } from "./AutocompleteSelectMenu";
+export * from "./AutocompleteSelectMenu";

src/components/CardMenu/CardMenu.tsx

@@ -1,12 +1,7 @@
 import IconButton from "@material-ui/core/IconButton";
 import Menu from "@material-ui/core/Menu";
 import MenuItem from "@material-ui/core/MenuItem";
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import MoreVertIcon from "@material-ui/icons/MoreVert";
 import React from "react";
 
@@ -23,8 +18,7 @@ export interface CardMenuProps {
   menuItems: CardMenuItem[];
 }
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => ({
   iconButton: {
     background: theme.palette.background.paper,
     borderRadius: "100%",
@@ -32,17 +26,12 @@ const styles = theme =>
     padding: 0,
     width: 32
   }
-  });
+}));
+
+const CardMenu: React.FC<CardMenuProps> = props => {
+  const { className, disabled, menuItems } = props;
+  const classes = useStyles(props);
 
-const CardMenu = withStyles(styles, {
-  name: "CardMenu"
-})(
-  ({
-    className,
-    classes,
-    disabled,
-    menuItems
-  }: CardMenuProps & WithStyles<typeof styles>) => {
   const [anchorEl, setAnchor] = React.useState<HTMLElement | null>(null);
 
   const handleClick = (event: React.MouseEvent<any>) => {
@@ -96,7 +85,6 @@ const CardMenu = withStyles(styles, {
       </Menu>
     </div>
   );
-  }
-);
+};
 CardMenu.displayName = "CardMenu";
 export default CardMenu;

src/components/CardSpacer.tsx

@@ -1,29 +1,25 @@
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import React from "react";
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => ({
   spacer: {
     [theme.breakpoints.down("sm")]: {
       marginTop: theme.spacing(1)
     },
     marginTop: theme.spacing(3)
   }
-  });
+}));
 
-interface CardSpacerProps extends WithStyles<typeof styles> {
+interface CardSpacerProps {
   children?: React.ReactNode;
 }
 
-export const CardSpacer = withStyles(styles, { name: "CardSpacer" })(
-  ({ classes, children }: CardSpacerProps) => (
-    <div className={classes.spacer}>{children}</div>
-  )
-);
+export const CardSpacer: React.FC<CardSpacerProps> = props => {
+  const { children } = props;
+
+  const classes = useStyles(props);
+
+  return <div className={classes.spacer}>{children}</div>;
+};
 CardSpacer.displayName = "CardSpacer";
 export default CardSpacer;

src/components/CardTitle/CardTitle.tsx

@@ -1,22 +1,16 @@
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 import classNames from "classnames";
 import React from "react";
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => ({
   children: theme.mixins.gutters({}),
   constantHeight: {
     height: 56
   },
   hr: {
     border: "none",
-      borderTop: `1px solid ${theme.overrides.MuiCard.root.borderColor}`,
+    borderTop: `1px solid ${theme.palette.divider}`,
     height: 0,
     marginBottom: 0,
     marginTop: 0,
@@ -34,9 +28,9 @@ const styles = theme =>
   toolbar: {
     marginRight: -theme.spacing(1)
   }
-  });
+}));
 
-interface CardTitleProps extends WithStyles<typeof styles> {
+interface CardTitleProps {
   children?: React.ReactNode;
   className?: string;
   height?: "default" | "const";
@@ -45,24 +39,27 @@ interface CardTitleProps extends WithStyles<typeof styles> {
   onClick?: (event: React.MouseEvent<any>) => void;
 }
 
-const CardTitle = withStyles(styles, { name: "CardTitle" })(
-  ({
-    classes,
+const CardTitle: React.FC<CardTitleProps> = props => {
+  const {
     className,
     children,
     height,
     title,
     toolbar,
     onClick,
-    ...props
-  }: CardTitleProps) => (
+    ...rest
+  } = props;
+
+  const classes = useStyles(props);
+
+  return (
     <>
       <div
         className={classNames(classes.root, {
           [className]: !!className,
           [classes.constantHeight]: height === "const"
         })}
-        {...props}
+        {...rest}
       >
         <Typography
           className={classes.title}
@@ -77,7 +74,7 @@ const CardTitle = withStyles(styles, { name: "CardTitle" })(
       <div className={classes.children}>{children}</div>
       <hr className={classes.hr} />
     </>
-  )
   );
+};
 CardTitle.displayName = "CardTitle";
 export default CardTitle;

src/components/Checkbox/Checkbox.tsx

@@ -1,12 +1,6 @@
-import { Omit } from "@material-ui/core";
 import ButtonBase from "@material-ui/core/ButtonBase";
 import { CheckboxProps as MuiCheckboxProps } from "@material-ui/core/Checkbox";
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import { fade } from "@material-ui/core/styles/colorManipulator";
 import classNames from "classnames";
 import React from "react";
@@ -25,8 +19,7 @@ export type CheckboxProps = Omit<
   onChange?: (event: React.ChangeEvent<any>) => void;
 };
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => ({
   box: {
     "&$checked": {
       "&:before": {
@@ -86,20 +79,22 @@ const styles = theme =>
     margin: "5px 9px",
     width: 30
   }
-  });
-const Checkbox = withStyles(styles, { name: "Checkbox" })(
-  ({
+}));
+const Checkbox: React.FC<CheckboxProps> = props => {
+  const {
     checked,
     className,
-    classes,
+
     disabled,
     disableClickPropagation,
     indeterminate,
     onChange,
     value,
     name,
-    ...props
-  }: CheckboxProps & WithStyles<typeof styles>) => {
+    ...rest
+  } = props;
+  const classes = useStyles(props);
+
   const inputRef = React.useRef<HTMLInputElement>(null);
   const handleClick = React.useCallback(
     disableClickPropagation
@@ -113,7 +108,7 @@ const Checkbox = withStyles(styles, { name: "Checkbox" })(
 
   return (
     <ButtonBase
-        {...props}
+      {...rest}
       centerRipple
       className={classNames(classes.root, className)}
       disabled={disabled}
@@ -134,7 +129,6 @@ const Checkbox = withStyles(styles, { name: "Checkbox" })(
       />
     </ButtonBase>
   );
-  }
-);
+};
 Checkbox.displayName = "Checkbox";
 export default Checkbox;

src/components/Checkbox/index.ts

@@ -1,2 +1,2 @@
-export { default } from './Checkbox';
-export * from './Checkbox';
+export { default } from "./Checkbox";
+export * from "./Checkbox";

src/components/Chip/Chip.tsx

@@ -1,9 +1,4 @@
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import { fade } from "@material-ui/core/styles/colorManipulator";
 import Typography from "@material-ui/core/Typography";
 import CloseIcon from "@material-ui/icons/Close";
@@ -16,8 +11,7 @@ export interface ChipProps {
   onClose?: () => void;
 }
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => ({
   closeIcon: {
     cursor: "pointer",
     fontSize: 16,
@@ -34,14 +28,13 @@ const styles = theme =>
     marginRight: theme.spacing(2),
     padding: "6px 12px"
   }
-  });
-const Chip = withStyles(styles, { name: "Chip" })(
-  ({
-    classes,
-    className,
-    label,
-    onClose
-  }: ChipProps & WithStyles<typeof styles>) => (
+}));
+const Chip: React.FC<ChipProps> = props => {
+  const { className, label, onClose } = props;
+
+  const classes = useStyles(props);
+
+  return (
     <div className={classNames(classes.root, className)}>
       <Typography className={classes.label} variant="caption">
         {label}
@@ -50,7 +43,7 @@ const Chip = withStyles(styles, { name: "Chip" })(
         )}
       </Typography>
     </div>
-  )
   );
+};
 Chip.displayName = "Chip";
 export default Chip;

src/components/Chip/index.ts

@@ -1,2 +1,2 @@
-export { default } from './Chip';
-export * from './Chip';
+export { default } from "./Chip";
+export * from "./Chip";

src/components/ColumnPicker/ColumnPickerContent.tsx

@@ -55,7 +55,7 @@ const useStyles = makeStyles(theme => ({
     padding: 0
   },
   dropShadow: {
-    boxShadow: `0px -5px 10px 0px ${theme.overrides.MuiCard.root.borderColor}`
+    boxShadow: `0px -5px 10px 0px ${theme.palette.divider}`
   },
   loadMoreLoaderContainer: {
     alignItems: "center",

src/components/ConfirmButton/ConfirmButton.tsx

@@ -1,11 +1,10 @@
-import { Omit } from "@material-ui/core";
 import Button, { ButtonProps } from "@material-ui/core/Button";
 import CircularProgress from "@material-ui/core/CircularProgress";
 import {
   createStyles,
   Theme,
-  withStyles,
-  WithStyles
+  WithStyles,
+  withStyles
 } from "@material-ui/core/styles";
 import CheckIcon from "@material-ui/icons/Check";
 import { buttonMessages } from "@saleor/intl";
@@ -19,7 +18,7 @@ export type ConfirmButtonTransitionState =
   | "error"
   | "default";
 
-const styles = theme =>
+const styles = (theme: Theme) =>
   createStyles({
     error: {
       "&:hover": {

src/components/Container.tsx

@@ -1,14 +1,8 @@
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import classNames from "classnames";
 import React from "react";
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => ({
   root: {
     [theme.breakpoints.up("lg")]: {
       marginLeft: "auto",
@@ -20,16 +14,18 @@ const styles = theme =>
     },
     padding: theme.spacing(0, 1)
   }
-  });
+}));
 
-interface ContainerProps extends WithStyles<typeof styles> {
+interface ContainerProps {
   className?: string;
 }
 
-export const Container = withStyles(styles, {
-  name: "Container"
-})(({ classes, className, ...props }: ContainerProps) => (
-  <div className={classNames(classes.root, className)} {...props} />
-));
+export const Container: React.FC<ContainerProps> = props => {
+  const { className, ...rest } = props;
+
+  const classes = useStyles(props);
+
+  return <div className={classNames(classes.root, className)} {...rest} />;
+};
 Container.displayName = "Container";
 export default Container;

src/components/ControlledSwitch.tsx

@@ -1,19 +1,18 @@
-import { createStyles, Theme, withStyles, WithStyles } from "@material-ui/core";
+import { makeStyles } from "@material-ui/core";
 import FormControlLabel from "@material-ui/core/FormControlLabel";
 import Switch from "@material-ui/core/Switch";
 import React from "react";
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => ({
   label: {
     marginLeft: theme.spacing(3.5)
   },
   labelText: {
     fontSize: 14
   }
-  });
+}));
 
-interface ControlledSwitchProps extends WithStyles<typeof styles> {
+interface ControlledSwitchProps {
   checked: boolean;
   disabled?: boolean;
   label: string | React.ReactNode;
@@ -23,11 +22,8 @@ interface ControlledSwitchProps extends WithStyles<typeof styles> {
   onChange?(event: React.ChangeEvent<any>);
 }
 
-export const ControlledSwitch = withStyles(styles, {
-  name: "ControlledSwitch"
-})(
-  ({
-    classes,
+export const ControlledSwitch: React.FC<ControlledSwitchProps> = props => {
+  const {
     checked,
     disabled,
     onChange,
@@ -35,7 +31,11 @@ export const ControlledSwitch = withStyles(styles, {
     name,
     secondLabel,
     uncheckedLabel
-  }: ControlledSwitchProps) => (
+  } = props;
+
+  const classes = useStyles(props);
+
+  return (
     <FormControlLabel
       control={
         <Switch
@@ -65,7 +65,7 @@ export const ControlledSwitch = withStyles(styles, {
       }
       disabled={disabled}
     />
-  )
   );
+};
 ControlledSwitch.displayName = "ControlledSwitch";
 export default ControlledSwitch;

src/components/CountryList/CountryList.tsx

@@ -2,12 +2,7 @@ import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
 import IconButton from "@material-ui/core/IconButton";
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
@@ -32,8 +27,7 @@ export interface CountryListProps {
   onCountryUnassign: (country: string) => void;
 }
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => ({
   iconCell: {
     "&:last-child": {
       paddingRight: 0
@@ -44,7 +38,7 @@ const styles = theme =>
     color: theme.palette.text.disabled,
     display: "inline-block",
     left: 0,
-      marginRight: theme.spacing(.5),
+    marginRight: theme.spacing(0.5),
     position: "absolute"
   },
   offsetCell: {
@@ -76,20 +70,19 @@ const styles = theme =>
   wideColumn: {
     width: "100%"
   }
-  });
+}));
 
-const CountryList = withStyles(styles, {
-  name: "CountryList"
-})(
-  ({
-    classes,
+const CountryList: React.FC<CountryListProps> = props => {
+  const {
     countries,
     disabled,
     emptyText,
     title,
     onCountryAssign,
     onCountryUnassign
-  }: CountryListProps & WithStyles<typeof styles>) => {
+  } = props;
+  const classes = useStyles(props);
+
   const [isCollapsed, setCollapseStatus] = React.useState(true);
   const toggleCollapse = () => setCollapseStatus(!isCollapsed);
 
@@ -184,6 +177,5 @@ const CountryList = withStyles(styles, {
       </CardContent>
     </Card>
   );
-  }
-);
+};
 export default CountryList;

src/components/Debounce.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 export interface DebounceProps<T> {
-  children: ((props: (...args: T[]) => void) => React.ReactNode);
+  children: (props: (...args: T[]) => void) => React.ReactNode;
   debounceFn: (...args: T[]) => void;
   time?: number;
 }

src/components/DeleteFilterTabDialog/index.ts

@@ -1,2 +1,2 @@
-export { default } from './DeleteFilterTabDialog';
-export * from './DeleteFilterTabDialog';
+export { default } from "./DeleteFilterTabDialog";
+export * from "./DeleteFilterTabDialog";

src/components/EditableTableCell/EditableTableCell.tsx

@@ -1,11 +1,6 @@
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import TableCell from "@material-ui/core/TableCell";
 import TextField, { TextFieldProps } from "@material-ui/core/TextField";
 import Typography from "@material-ui/core/Typography";
@@ -14,10 +9,9 @@ import React from "react";
 
 import useForm from "@saleor/hooks/useForm";
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => ({
   card: {
-      border: `1px solid ${theme.overrides.MuiCard.root.borderColor}`
+    border: `1px solid ${theme.palette.divider}`
   },
   container: {
     position: "relative"
@@ -43,9 +37,9 @@ const styles = theme =>
     cursor: "pointer",
     fontSize: "0.8125rem"
   }
-  });
+}));
 
-interface EditableTableCellProps extends WithStyles<typeof styles> {
+interface EditableTableCellProps {
   className?: string;
   defaultValue?: string;
   focused?: boolean;
@@ -54,18 +48,17 @@ interface EditableTableCellProps extends WithStyles<typeof styles> {
   onConfirm(value: string): any;
 }
 
-export const EditableTableCell = withStyles(styles, {
-  name: "EditableTableCell"
-})(
-  ({
-    classes,
+export const EditableTableCell: React.FC<EditableTableCellProps> = props => {
+  const {
     className,
     defaultValue,
     focused,
     InputProps,
     value,
     onConfirm
-  }: EditableTableCellProps) => {
+  } = props;
+  const classes = useStyles(props);
+
   const handleConfirm = (data: { value: string }) => {
     disable();
     onConfirm(data.value);
@@ -101,7 +94,6 @@ export const EditableTableCell = withStyles(styles, {
       )}
     </TableCell>
   );
-  }
-);
+};
 EditableTableCell.displayName = "EditableTableCell";
 export default EditableTableCell;

src/components/ErrorPage/ErrorPage.tsx

@@ -1,10 +1,5 @@
 import Button from "@material-ui/core/Button";
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 import React from "react";
 import SVG from "react-inlinesvg";
@@ -12,12 +7,11 @@ import { FormattedMessage } from "react-intl";
 
 import notFoundImage from "@assets/images/what.svg";
 
-export interface ErrorPageProps extends WithStyles<typeof styles> {
+export interface ErrorPageProps {
   onBack: () => void;
 }
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => ({
   bottomHeader: {
     fontWeight: 600 as 600,
     textTransform: "uppercase"
@@ -59,10 +53,14 @@ const styles = theme =>
   upperHeader: {
     fontWeight: 600 as 600
   }
-  });
+}));
 
-const ErrorPage = withStyles(styles, { name: "NotFoundPage" })(
-  ({ classes, onBack }: ErrorPageProps) => (
+const ErrorPage: React.FC<ErrorPageProps> = props => {
+  const { onBack } = props;
+
+  const classes = useStyles(props);
+
+  return (
     <div className={classes.root}>
       <div className={classes.container}>
         <div className={classes.innerContainer}>
@@ -99,7 +97,7 @@ const ErrorPage = withStyles(styles, { name: "NotFoundPage" })(
         </div>
       </div>
     </div>
-  )
   );
+};
 ErrorPage.displayName = "ErrorPage";
 export default ErrorPage;

src/components/ExtendedPageHeader/ExtendedPageHeader.tsx

@@ -1,14 +1,8 @@
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import classNames from "classnames";
 import React from "react";
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => ({
   action: {
     flex: "0 0 auto"
   },
@@ -35,21 +29,25 @@ const styles = theme =>
     flex: 1,
     paddingBottom: theme.spacing(2)
   }
-  });
+}));
 
-interface ExtendedPageHeaderProps extends WithStyles<typeof styles> {
+interface ExtendedPageHeaderProps {
   children?: React.ReactNode;
   className?: string;
   title?: React.ReactNode;
 }
 
-const ExtendedPageHeader = withStyles(styles, { name: "ExtendedPageHeader" })(
-  ({ children, classes, className, title }: ExtendedPageHeaderProps) => (
+const ExtendedPageHeader: React.FC<ExtendedPageHeaderProps> = props => {
+  const { children, className, title } = props;
+
+  const classes = useStyles(props);
+
+  return (
     <div className={classNames(classes.root, className)}>
       {title}
       <div className={classes.action}>{children}</div>
     </div>
-  )
   );
+};
 ExtendedPageHeader.displayName = "ExtendedPageHeader";
 export default ExtendedPageHeader;

src/components/ExternalLink/ExternalLink.tsx

@@ -1,36 +1,31 @@
-import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import Typography, { TypographyProps } from "@material-ui/core/Typography";
 import React from "react";
 
-const styles = createStyles({
+const useStyles = makeStyles({
   link: {
     textDecoration: "none"
   }
 });
 
-interface ExternalLinkProps
-  extends React.HTMLProps<HTMLAnchorElement>,
-    WithStyles<typeof styles> {
+interface ExternalLinkProps extends React.HTMLProps<HTMLAnchorElement> {
   href: string;
   className?: string;
   typographyProps?: TypographyProps;
 }
 
-const ExternalLink = withStyles(styles, { name: "ExternalLink" })(
-  ({
-    classes,
-    className,
-    children,
-    href,
-    typographyProps,
-    ...props
-  }: ExternalLinkProps) => (
-    <a href={href} className={classes.link} {...props}>
+const ExternalLink: React.FC<ExternalLinkProps> = props => {
+  const { className, children, href, typographyProps, ...rest } = props;
+
+  const classes = useStyles(props);
+
+  return (
+    <a href={href} className={classes.link} {...rest}>
       <Typography className={className} color="primary" {...typographyProps}>
         {children}
       </Typography>
     </a>
-  )
   );
+};
 ExternalLink.displayName = "ExternalLink";
 export default ExternalLink;

src/components/FileUpload/FileUpload.tsx

@@ -1,10 +1,10 @@
 import Button from "@material-ui/core/Button";
-import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
-const styles = createStyles({
+const useStyles = makeStyles({
   fileUploadField: {
     display: "none"
   },
@@ -16,15 +16,19 @@ const styles = createStyles({
   }
 });
 
-interface FileUploadProps extends WithStyles<typeof styles> {
+interface FileUploadProps {
   disabled?: boolean;
   name?: string;
   value?: any;
   onChange?(event: React.ChangeEvent<any>);
 }
 
-const FileUpload = withStyles(styles, { name: "FileUpload" })(
-  ({ classes, disabled, name, value, onChange }: FileUploadProps) => (
+const FileUpload: React.FC<FileUploadProps> = props => {
+  const { disabled, name, value, onChange } = props;
+
+  const classes = useStyles(props);
+
+  return (
     <div className={classes.root}>
       <input
         disabled={disabled}
@@ -48,7 +52,7 @@ const FileUpload = withStyles(styles, { name: "FileUpload" })(
         />
       </Button>
     </div>
-  )
   );
+};
 FileUpload.displayName = "FileUpload";
 export default FileUpload;

src/components/Filter/Filter.tsx

@@ -2,7 +2,7 @@ import ButtonBase from "@material-ui/core/ButtonBase";
 import Grow from "@material-ui/core/Grow";
 import Paper from "@material-ui/core/Paper";
 import Popper from "@material-ui/core/Popper";
-import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import { fade } from "@material-ui/core/styles/colorManipulator";
 import Typography from "@material-ui/core/Typography";
 import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
@@ -21,8 +21,7 @@ export interface FilterProps<TFilterKeys = string> {
   onFilterAdd: (filter: FilterContentSubmitData) => void;
 }
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => ({
   addFilterButton: {
     "&$filterButton": {
       "&:hover, &:focus": {
@@ -78,15 +77,11 @@ const styles = theme =>
   rotate: {
     transform: "rotate(180deg)"
   }
-  });
-const Filter = withStyles(styles, { name: "Filter" })(
-  ({
-    classes,
-    currencySymbol,
-    filterLabel,
-    menu,
-    onFilterAdd
-  }: FilterProps & WithStyles<typeof styles>) => {
+}));
+const Filter: React.FC<FilterProps> = props => {
+  const { currencySymbol, filterLabel, menu, onFilterAdd } = props;
+  const classes = useStyles(props);
+
   const anchor = React.useRef<HTMLDivElement>();
   const [isFilterMenuOpened, setFilterMenuOpened] = React.useState(false);
 
@@ -99,10 +94,7 @@ const Filter = withStyles(styles, { name: "Filter" })(
         onClick={() => setFilterMenuOpened(!isFilterMenuOpened)}
       >
         <Typography className={classes.addFilterText}>
-            <FormattedMessage
-              defaultMessage="Add Filter"
-              description="button"
-            />
+          <FormattedMessage defaultMessage="Add Filter" description="button" />
         </Typography>
         <ArrowDropDownIcon
           color="primary"
@@ -143,7 +135,6 @@ const Filter = withStyles(styles, { name: "Filter" })(
       </Popper>
     </div>
   );
-  }
-);
+};
 Filter.displayName = "Filter";
 export default Filter;

src/components/Filter/FilterActions.tsx

@@ -17,6 +17,7 @@ const useInputStyles = makeStyles({
 
 const Search: React.FC<TextFieldProps> = props => {
   const classes = useInputStyles({});
+
   return (
     <TextField
       {...props}

src/components/FilterBar/index.ts

@@ -1,2 +1,2 @@
-export { default } from './FilterBar';
-export * from './FilterBar';
+export { default } from "./FilterBar";
+export * from "./FilterBar";

src/components/FormSpacer.tsx

@@ -1,27 +1,23 @@
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import React from "react";
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => ({
   spacer: {
     marginTop: theme.spacing(3)
   }
-  });
+}));
 
-interface FormSpacerProps extends WithStyles<typeof styles> {
+interface FormSpacerProps {
   children?: React.ReactNode;
 }
 
-export const FormSpacer = withStyles(styles, { name: "FormSpacer" })(
-  ({ classes, children }: FormSpacerProps) => (
-    <div className={classes.spacer}>{children}</div>
-  )
-);
+export const FormSpacer: React.FC<FormSpacerProps> = props => {
+  const { children } = props;
+
+  const classes = useStyles(props);
+
+  return <div className={classes.spacer}>{children}</div>;
+};
 
 FormSpacer.displayName = "FormSpacer";
 export default FormSpacer;

src/components/Grid/Grid.tsx

@@ -1,21 +1,15 @@
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import classNames from "classnames";
 import React from "react";
 
 export type GridVariant = "default" | "inverted" | "uniform";
-export interface GridProps extends WithStyles<typeof styles> {
+export interface GridProps {
   children: React.ReactNodeArray | React.ReactNode;
   className?: string;
   variant?: GridVariant;
 }
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => ({
   default: {
     gridTemplateColumns: "9fr 4fr"
   },
@@ -34,10 +28,14 @@ const styles = theme =>
   uniform: {
     gridTemplateColumns: "1fr 1fr"
   }
-  });
+}));
 
-export const Grid = withStyles(styles, { name: "Grid" })(
-  ({ className, children, classes, variant }: GridProps) => (
+export const Grid: React.FC<GridProps> = props => {
+  const { className, children, variant } = props;
+
+  const classes = useStyles(props);
+
+  return (
     <div
       className={classNames(className, classes.root, {
         [classes.default]: variant === "default",
@@ -47,8 +45,8 @@ export const Grid = withStyles(styles, { name: "Grid" })(
     >
       {children}
     </div>
-  )
   );
+};
 Grid.displayName = "Grid";
 Grid.defaultProps = {
   variant: "default"

src/components/Hr.tsx

@@ -1,9 +1,4 @@
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import classNames from "classnames";
 import React from "react";
 
@@ -11,22 +6,23 @@ interface HrProps {
   className?: string;
 }
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => ({
   root: {
-      backgroundColor: theme.overrides.MuiCard.root.borderColor,
+    backgroundColor: theme.palette.divider,
     border: "none",
     display: "block",
     height: 1,
     margin: 0,
     width: "100%"
   }
-  });
+}));
 
-export const Hr = withStyles(styles, { name: "Hr" })(
-  ({ className, classes }: HrProps & WithStyles<typeof styles>) => (
-    <hr className={classNames(classes.root, className)} />
-  )
-);
+export const Hr: React.FC<HrProps> = props => {
+  const { className } = props;
+
+  const classes = useStyles(props);
+
+  return <hr className={classNames(classes.root, className)} />;
+};
 Hr.displayName = "Hr";
 export default Hr;

src/components/IconButtonTableCell/IconButtonTableCell.tsx

@@ -1,10 +1,5 @@
 import IconButton from "@material-ui/core/IconButton";
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import TableCell from "@material-ui/core/TableCell";
 import React from "react";
 
@@ -17,23 +12,26 @@ export interface IconButtonTableCellProps {
   onClick: () => void;
 }
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => ({
   root: {
     "&:last-child": {
       paddingRight: 0
     },
     paddingRight: 0,
-      width: ICONBUTTON_SIZE + theme.spacing(.5)
+    width: ICONBUTTON_SIZE + theme.spacing(0.5)
   }
-  });
-const IconButtonTableCell = withStyles(styles, { name: "IconButtonTableCell" })(
-  ({
+}));
+const IconButtonTableCell: React.FC<IconButtonTableCellProps> = props => {
+  const {
     children,
-    classes,
+
     disabled,
     onClick
-  }: IconButtonTableCellProps & WithStyles<typeof styles>) => (
+  } = props;
+
+  const classes = useStyles(props);
+
+  return (
     <TableCell className={classes.root}>
       <IconButton
         color="primary"
@@ -43,7 +41,7 @@ const IconButtonTableCell = withStyles(styles, { name: "IconButtonTableCell" })(
         {children}
       </IconButton>
     </TableCell>
-  )
   );
+};
 IconButtonTableCell.displayName = "IconButtonTableCell";
 export default IconButtonTableCell;

src/components/IconButtonTableCell/index.ts

@@ -1,2 +1,2 @@
-export { default } from './IconButtonTableCell';
-export * from './IconButtonTableCell';
+export { default } from "./IconButtonTableCell";
+export * from "./IconButtonTableCell";

src/components/ImageTile/ImageTile.tsx

@@ -1,17 +1,11 @@
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import React from "react";
 
 import IconButton from "@material-ui/core/IconButton";
 import DeleteIcon from "@material-ui/icons/Delete";
 import EditIcon from "@material-ui/icons/Edit";
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => ({
   image: {
     height: "100%",
     objectFit: "contain",
@@ -25,7 +19,7 @@ const styles = theme =>
       }
     },
     background: theme.palette.background.paper,
-      border: `1px solid ${theme.overrides.MuiCard.root.borderColor}`,
+    border: `1px solid ${theme.palette.divider}`,
     borderRadius: theme.spacing(),
     height: 148,
     overflow: "hidden",
@@ -47,9 +41,9 @@ const styles = theme =>
     display: "flex",
     justifyContent: "flex-end"
   }
-  });
+}));
 
-interface ImageTileProps extends WithStyles<typeof styles> {
+interface ImageTileProps {
   image: {
     alt?: string;
     url: string;
@@ -58,8 +52,12 @@ interface ImageTileProps extends WithStyles<typeof styles> {
   onImageEdit?: (event: React.ChangeEvent<any>) => void;
 }
 
-const ImageTile = withStyles(styles, { name: "ImageTile" })(
-  ({ classes, onImageDelete, onImageEdit, image }: ImageTileProps) => (
+const ImageTile: React.FC<ImageTileProps> = props => {
+  const { onImageDelete, onImageEdit, image } = props;
+
+  const classes = useStyles(props);
+
+  return (
     <div className={classes.imageContainer} data-tc="product-image">
       <div className={classes.imageOverlay}>
         <div className={classes.imageOverlayToolbar}>
@@ -77,7 +75,7 @@ const ImageTile = withStyles(styles, { name: "ImageTile" })(
       </div>
       <img className={classes.image} src={image.url} alt={image.alt} />
     </div>
-  )
   );
+};
 ImageTile.displayName = "ImageTile";
 export default ImageTile;

src/components/ImageUpload/ImageUpload.tsx

@@ -1,9 +1,4 @@
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import { fade } from "@material-ui/core/styles/colorManipulator";
 import Typography from "@material-ui/core/Typography";
 import classNames from "classnames";
@@ -22,8 +17,7 @@ interface ImageUploadProps {
   onImageUpload: (file: File) => void;
 }
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => ({
   containerDragActive: {
     background: fade(theme.palette.primary.main, 0.1),
     color: theme.palette.primary.main
@@ -58,19 +52,23 @@ const styles = theme =>
     fontWeight: 600,
     textTransform: "uppercase"
   }
-  });
+}));
 
-export const ImageUpload = withStyles(styles, { name: "ImageUpload" })(
-  ({
+export const ImageUpload: React.FC<ImageUploadProps> = props => {
+  const {
     children,
-    classes,
+
     className,
     disableClick,
     isActiveClassName,
     iconContainerActiveClassName,
     iconContainerClassName,
     onImageUpload
-  }: ImageUploadProps & WithStyles<typeof styles>) => (
+  } = props;
+
+  const classes = useStyles(props);
+
+  return (
     <Dropzone
       disableClick={disableClick}
       onDrop={files => onImageUpload(files[0])}
@@ -107,7 +105,7 @@ export const ImageUpload = withStyles(styles, { name: "ImageUpload" })(
         </>
       )}
     </Dropzone>
-  )
   );
+};
 ImageUpload.displayName = "ImageUpload";
 export default ImageUpload;

src/components/LanguageSwitch/LanguageSwitch.tsx

@@ -5,12 +5,7 @@ import MenuItem from "@material-ui/core/MenuItem";
 import Menu from "@material-ui/core/MenuList";
 import Paper from "@material-ui/core/Paper";
 import Popper from "@material-ui/core/Popper";
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 import ArrowDropDown from "@material-ui/icons/ArrowDropDown";
 import classNames from "classnames";
@@ -26,8 +21,7 @@ export interface LanguageSwitchProps {
   onLanguageChange: (lang: LanguageCodeEnum) => void;
 }
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => ({
   arrow: {
     color: theme.palette.primary.main,
     transition: theme.transitions.duration.standard + "ms"
@@ -56,14 +50,11 @@ const styles = theme =>
   rotate: {
     transform: "rotate(180deg)"
   }
-  });
-const LanguageSwitch = withStyles(styles, { name: "LanguageSwitch" })(
-  ({
-    classes,
-    currentLanguage,
-    languages,
-    onLanguageChange
-  }: LanguageSwitchProps & WithStyles<typeof styles>) => {
+}));
+const LanguageSwitch: React.FC<LanguageSwitchProps> = props => {
+  const { currentLanguage, languages, onLanguageChange } = props;
+  const classes = useStyles(props);
+
   const [isExpanded, setExpandedState] = React.useState(false);
   const anchor = React.useRef();
 
@@ -128,7 +119,6 @@ const LanguageSwitch = withStyles(styles, { name: "LanguageSwitch" })(
       </Popper>
     </div>
   );
-  }
-);
+};
 LanguageSwitch.displayName = "LanguageSwitch";
 export default LanguageSwitch;

src/components/LanguageSwitch/index.ts

@@ -1,2 +1,2 @@
-export { default } from './LanguageSwitch';
-export * from './LanguageSwitch';
+export { default } from "./LanguageSwitch";
+export * from "./LanguageSwitch";

src/components/Link.tsx

@@ -1,15 +1,9 @@
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import Typography, { TypographyProps } from "@material-ui/core/Typography";
 import classNames from "classnames";
 import React from "react";
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => ({
   primary: {
     color: theme.palette.primary.main
   },
@@ -23,27 +17,28 @@ const styles = theme =>
   underline: {
     textDecoration: "underline"
   }
-  });
+}));
 
-interface LinkProps
-  extends React.AnchorHTMLAttributes<HTMLAnchorElement>,
-    WithStyles<typeof styles> {
+interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   color?: "primary" | "secondary";
   underline?: boolean;
   typographyProps?: TypographyProps;
   onClick: () => void;
 }
 
-const Link = withStyles(styles, { name: "Link" })(
-  ({
-    classes,
+const Link: React.FC<LinkProps> = props => {
+  const {
     className,
     children,
     color = "primary",
     underline = false,
     onClick,
     ...linkProps
-  }: LinkProps) => (
+  } = props;
+
+  const classes = useStyles(props);
+
+  return (
     <Typography
       component="a"
       className={classNames({
@@ -59,7 +54,7 @@ const Link = withStyles(styles, { name: "Link" })(
     >
       {children}
     </Typography>
-  )
   );
+};
 Link.displayName = "Link";
 export default Link;

src/components/ListField/ListField.tsx

@@ -1,4 +1,3 @@
-import { Omit } from "@material-ui/core";
 import Button from "@material-ui/core/Button";
 import {
   createStyles,
@@ -17,7 +16,7 @@ interface ListFieldState {
   value: string;
 }
 
-const styles = theme =>
+const styles = (theme: Theme) =>
   createStyles({
     chip: {
       marginBottom: theme.spacing(1)

src/components/MenuToggle.tsx

@@ -2,15 +2,13 @@ import React from "react";
 
 interface MenuToggleProps {
   ariaOwns?: string;
-  children: ((
-    props: {
+  children: (props: {
     actions: {
       open: () => void;
       close: () => void;
     };
     open: boolean;
-    }
-  ) => React.ReactElement<any>);
+  }) => React.ReactElement<any>;
 }
 
 interface MenuToggleState {

src/components/Money/index.ts

@@ -1,15 +1,15 @@
-import Money from "./Money";
+import { IMoney } from "./Money";
 
 export { default } from "./Money";
 export * from "./Money";
 
-export function addMoney(init: Money, ...args: Money[]): Money {
+export function addMoney(init: IMoney, ...args: IMoney[]): IMoney {
   return {
     amount: args.reduce((acc, curr) => acc + curr.amount, init.amount),
     currency: init.currency
   };
 }
-export function subtractMoney(init: Money, ...args: Money[]): Money {
+export function subtractMoney(init: IMoney, ...args: IMoney[]): IMoney {
   return {
     amount: args.reduce((acc, curr) => acc - curr.amount, init.amount),
     currency: init.currency

src/components/MoneyRange/MoneyRange.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { useIntl } from "react-intl";
 
 import { LocaleConsumer } from "../Locale";
-import IMoney from "../Money";
+import { IMoney } from "../Money";
 
 export interface MoneyRangeProps {
   from?: IMoney;

src/components/MoneyRange/index.ts

@@ -1,2 +1,2 @@
-export { default } from './MoneyRange';
-export * from './MoneyRange';
+export { default } from "./MoneyRange";
+export * from "./MoneyRange";

src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx

@@ -1,10 +1,5 @@
 import IconButton from "@material-ui/core/IconButton";
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import Typography from "@material-ui/core/Typography";
 import CloseIcon from "@material-ui/icons/Close";
@@ -20,8 +15,7 @@ import MultiAutocompleteSelectFieldContent, {
   MultiAutocompleteChoiceType
 } from "./MultiAutocompleteSelectFieldContent";
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => ({
   chip: {
     width: "100%"
   },
@@ -56,7 +50,7 @@ const styles = theme =>
     flexGrow: 1,
     position: "relative"
   }
-  });
+}));
 
 export interface MultiAutocompleteSelectFieldProps
   extends Partial<FetchMoreProps> {
@@ -77,14 +71,15 @@ const DebounceAutocomplete: React.ComponentType<
   DebounceProps<string>
 > = Debounce;
 
-export const MultiAutocompleteSelectFieldComponent = withStyles(styles, {
-  name: "MultiAutocompleteSelectField"
-})(
-  ({
+const MultiAutocompleteSelectFieldComponent: React.FC<
+  MultiAutocompleteSelectFieldProps
+> = props => {
+  const {
     allowCustomValues,
     choices,
-    classes,
+
     displayValues,
+
     hasMore,
     helperText,
     label,
@@ -95,8 +90,10 @@ export const MultiAutocompleteSelectFieldComponent = withStyles(styles, {
     fetchChoices,
     onChange,
     onFetchMore,
-    ...props
-  }: MultiAutocompleteSelectFieldProps & WithStyles<typeof styles>) => {
+    ...rest
+  } = props;
+  const classes = useStyles(props);
+
   const handleSelect = (
     item: string,
     downshiftOpts?: ControllerStateAndHelpers
@@ -129,12 +126,11 @@ export const MultiAutocompleteSelectFieldComponent = withStyles(styles, {
             inputValue.length > 0 &&
             allowCustomValues &&
             !choices.find(
-                choice =>
-                  choice.label.toLowerCase() === inputValue.toLowerCase()
+              choice => choice.label.toLowerCase() === inputValue.toLowerCase()
             );
 
           return (
-              <div className={classes.container} {...props}>
+            <div className={classes.container} {...rest}>
               <TextField
                 InputProps={{
                   ...getInputProps({
@@ -142,7 +138,7 @@ export const MultiAutocompleteSelectFieldComponent = withStyles(styles, {
                   }),
                   endAdornment: (
                     <div>
-                        <ArrowDropdownIcon onClick={toggleMenu} />
+                      <ArrowDropdownIcon onClick={() => toggleMenu()} />
                     </div>
                   ),
                   id: undefined,
@@ -190,12 +186,13 @@ export const MultiAutocompleteSelectFieldComponent = withStyles(styles, {
       </div>
     </>
   );
-  }
-);
+};
+
 const MultiAutocompleteSelectField: React.FC<
   MultiAutocompleteSelectFieldProps
 > = ({ choices, fetchChoices, ...props }) => {
   const [query, setQuery] = React.useState("");
+
   if (fetchChoices) {
     return (
       <DebounceAutocomplete debounceFn={fetchChoices}>
@@ -220,5 +217,6 @@ const MultiAutocompleteSelectField: React.FC<
     />
   );
 };
+
 MultiAutocompleteSelectField.displayName = "MultiAutocompleteSelectField";
 export default MultiAutocompleteSelectField;

src/components/MultiSelectField/MultiSelectField.tsx

@@ -4,19 +4,13 @@ import FormHelperText from "@material-ui/core/FormHelperText";
 import InputLabel from "@material-ui/core/InputLabel";
 import MenuItem from "@material-ui/core/MenuItem";
 import Select, { SelectProps } from "@material-ui/core/Select";
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
 import Checkbox from "../Checkbox";
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => ({
   checkbox: {
     marginRight: -theme.spacing(2)
   },
@@ -29,9 +23,9 @@ const styles = theme =>
     justifyContent: "space-between",
     width: "100%"
   }
-  });
+}));
 
-interface MultiSelectFieldProps extends WithStyles<typeof styles> {
+interface MultiSelectFieldProps {
   choices: Array<{
     value: string;
     label: string;
@@ -46,11 +40,8 @@ interface MultiSelectFieldProps extends WithStyles<typeof styles> {
   onChange(event: any);
 }
 
-export const MultiSelectField = withStyles(styles, {
-  name: "MultiSelectField"
-})(
-  ({
-    classes,
+export const MultiSelectField: React.FC<MultiSelectFieldProps> = props => {
+  const {
     disabled,
     error,
     label,
@@ -60,7 +51,9 @@ export const MultiSelectField = withStyles(styles, {
     name,
     hint,
     selectProps
-  }: MultiSelectFieldProps) => {
+  } = props;
+  const classes = useStyles(props);
+
   const choicesByKey = disabled
     ? {}
     : choices.reduce((prev, curr) => {
@@ -118,8 +111,7 @@ export const MultiSelectField = withStyles(styles, {
       {hint && <FormHelperText>{hint}</FormHelperText>}
     </FormControl>
   );
-  }
-);
+};
 MultiSelectField.defaultProps = {
   value: []
 };

src/components/NotFoundPage/NotFoundPage.tsx

@@ -1,10 +1,5 @@
 import Button from "@material-ui/core/Button";
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 import React from "react";
 import SVG from "react-inlinesvg";
@@ -12,8 +7,7 @@ import { FormattedMessage } from "react-intl";
 
 import notFoundImage from "@assets/images/not-found-404.svg";
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => ({
   button: {
     marginTop: theme.spacing(2),
     padding: 20
@@ -52,14 +46,18 @@ const styles = theme =>
     height: "100vh",
     width: "100vw"
   }
-  });
+}));
 
-interface NotFoundPageProps extends WithStyles<typeof styles> {
+interface NotFoundPageProps {
   onBack: () => void;
 }
 
-const NotFoundPage = withStyles(styles, { name: "NotFoundPage" })(
-  ({ classes, onBack }: NotFoundPageProps) => (
+const NotFoundPage: React.FC<NotFoundPageProps> = props => {
+  const { onBack } = props;
+
+  const classes = useStyles(props);
+
+  return (
     <div className={classes.root}>
       <div className={classes.container}>
         <div className={classes.innerContainer}>
@@ -93,7 +91,7 @@ const NotFoundPage = withStyles(styles, { name: "NotFoundPage" })(
         </div>
       </div>
     </div>
-  )
   );
+};
 NotFoundPage.displayName = "NotFoundPage";
 export default NotFoundPage;

src/components/PageHeader/PageHeader.tsx

@@ -1,17 +1,11 @@
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 import React from "react";
 
 import ExtendedPageHeader from "../ExtendedPageHeader";
 import Skeleton from "../Skeleton";
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => ({
   root: {
     display: "flex"
   },
@@ -20,16 +14,20 @@ const styles = theme =>
     fontSize: 24,
     paddingBottom: theme.spacing(2)
   }
-  });
+}));
 
-interface PageHeaderProps extends WithStyles<typeof styles> {
+interface PageHeaderProps {
   children?: React.ReactNode;
   className?: string;
   title?: string;
 }
 
-const PageHeader = withStyles(styles)(
-  ({ children, classes, className, title }: PageHeaderProps) => (
+const PageHeader: React.FC<PageHeaderProps> = props => {
+  const { children, className, title } = props;
+
+  const classes = useStyles(props);
+
+  return (
     <ExtendedPageHeader
       className={className}
       title={
@@ -40,7 +38,8 @@ const PageHeader = withStyles(styles)(
     >
       <div className={classes.root}>{children}</div>
     </ExtendedPageHeader>
-  )
   );
+};
+
 PageHeader.displayName = "PageHeader";
 export default PageHeader;

src/components/PhoneField/PhoneField.tsx

@@ -1,24 +1,18 @@
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import React from "react";
 
 import SingleSelectField from "@saleor/components/SingleSelectField";
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => ({
   root: {
     display: "grid",
     gridColumnGap: theme.spacing(2),
     gridTemplateColumns: "5rem 1fr"
   }
-  });
+}));
 
-interface PhoneFieldProps extends WithStyles<typeof styles> {
+interface PhoneFieldProps {
   name: string;
   prefix: string;
   number: string;
@@ -27,16 +21,19 @@ interface PhoneFieldProps extends WithStyles<typeof styles> {
   onChange(event: React.ChangeEvent<any>);
 }
 
-const PhoneField = withStyles(styles, { name: "PhoneField" })(
-  ({
-    classes,
+const PhoneField: React.FC<PhoneFieldProps> = props => {
+  const {
     name,
     number: phoneNumber,
     prefix,
     prefixes,
     label,
     onChange
-  }: PhoneFieldProps) => (
+  } = props;
+
+  const classes = useStyles(props);
+
+  return (
     <div className={classes.root}>
       <SingleSelectField
         name={name + "_prefix"}
@@ -52,7 +49,7 @@ const PhoneField = withStyles(styles, { name: "PhoneField" })(
         label="&nbsp;"
       />
     </div>
-  )
   );
+};
 PhoneField.displayName = "PhoneField";
 export default PhoneField;

src/components/PriceField/PriceField.tsx

@@ -1,11 +1,10 @@
 import { InputProps } from "@material-ui/core/Input";
 import InputAdornment from "@material-ui/core/InputAdornment";
-import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import React from "react";
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => ({
   currencySymbol: {
     fontSize: "0.875rem"
   },
@@ -24,9 +23,9 @@ const styles = theme =>
   widgetContainer: {
     marginTop: theme.spacing(2)
   }
-  });
+}));
 
-interface PriceFieldProps extends WithStyles<typeof styles> {
+interface PriceFieldProps {
   className?: string;
   currencySymbol?: string;
   disabled?: boolean;
@@ -39,8 +38,8 @@ interface PriceFieldProps extends WithStyles<typeof styles> {
   onChange(event: any);
 }
 
-export const PriceField = withStyles(styles, { name: "PriceField" })(
-  ({
+export const PriceField: React.FC<PriceFieldProps> = props => {
+  const {
     className,
     disabled,
     error,
@@ -48,11 +47,14 @@ export const PriceField = withStyles(styles, { name: "PriceField" })(
     hint,
     currencySymbol,
     name,
-    classes,
     onChange,
     value,
     InputProps
-  }: PriceFieldProps) => (
+  } = props;
+
+  const classes = useStyles(props);
+
+  return (
     <TextField
       className={className}
       error={error}
@@ -75,8 +77,8 @@ export const PriceField = withStyles(styles, { name: "PriceField" })(
       disabled={disabled}
       onChange={onChange}
     />
-  )
   );
+};
 PriceField.defaultProps = {
   name: "price"
 };

src/components/RadioSwitchField/RadioSwitchField.tsx

@@ -2,11 +2,11 @@ import FormControl from "@material-ui/core/FormControl";
 import FormControlLabel from "@material-ui/core/FormControlLabel";
 import Radio from "@material-ui/core/Radio";
 import RadioGroup from "@material-ui/core/RadioGroup";
-import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import classNames from "classnames";
 import React from "react";
 
-const styles = createStyles({
+const useStyles = makeStyles({
   formControl: {
     padding: 0,
     width: "100%"
@@ -37,12 +37,9 @@ interface RadioSwitchFieldProps {
   onChange: (event: React.ChangeEvent<any>) => void;
 }
 
-export const RadioSwitchField = withStyles(styles, {
-  name: "RadioSwitchField"
-})(
-  ({
+export const RadioSwitchField: React.FC<RadioSwitchFieldProps> = props => {
+  const {
     className,
-    classes,
     disabled,
     error,
     firstOptionLabel,
@@ -50,7 +47,9 @@ export const RadioSwitchField = withStyles(styles, {
     name,
     secondOptionLabel,
     value
-  }: RadioSwitchFieldProps & WithStyles<typeof styles>) => {
+  } = props;
+  const classes = useStyles(props);
+
   const initialValue = value ? "true" : "false";
 
   const change = event => {
@@ -91,7 +90,6 @@ export const RadioSwitchField = withStyles(styles, {
       </RadioGroup>
     </FormControl>
   );
-  }
-);
+};
 RadioSwitchField.displayName = "RadioSwitchField";
 export default RadioSwitchField;

src/components/RichTextEditor/ImageEntity.tsx

@@ -4,12 +4,7 @@ import Grow from "@material-ui/core/Grow";
 import IconButton from "@material-ui/core/IconButton";
 import Paper from "@material-ui/core/Paper";
 import Popper from "@material-ui/core/Popper";
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import DeleteIcon from "@material-ui/icons/Delete";
 import { ContentState } from "draft-js";
 import React from "react";
@@ -23,8 +18,7 @@ interface ImageEntityProps {
   onRemove: (entityKey: string) => void;
 }
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => ({
   anchor: {
     display: "inline-block"
   },
@@ -42,18 +36,12 @@ const styles = theme =>
     minHeight: 72,
     padding: theme.spacing(1.5)
   }
-  });
+}));
+
+const ImageEntity: React.FC<ImageEntityProps> = props => {
+  const { contentState, entityKey, onEdit, onRemove } = props;
+  const classes = useStyles(props);
 
-const ImageEntity = withStyles(styles, {
-  name: "ImageEntity"
-})(
-  ({
-    classes,
-    contentState,
-    entityKey,
-    onEdit,
-    onRemove
-  }: ImageEntityProps & WithStyles<typeof styles>) => {
   const [isOpened, setOpenStatus] = React.useState(false);
   const anchor = React.useRef<HTMLDivElement>();
 
@@ -109,6 +97,5 @@ const ImageEntity = withStyles(styles, {
       />
     </>
   );
-  }
-);
+};
 export default ImageEntity;

src/components/RichTextEditor/LinkEntity.tsx

@@ -4,12 +4,7 @@ import Grow from "@material-ui/core/Grow";
 import IconButton from "@material-ui/core/IconButton";
 import Paper from "@material-ui/core/Paper";
 import Popper from "@material-ui/core/Popper";
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 import DeleteIcon from "@material-ui/icons/Delete";
 import { ContentState } from "draft-js";
@@ -27,8 +22,7 @@ interface LinkEntityProps {
   onRemove: (entityKey: string) => void;
 }
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => ({
   anchor: {
     display: "inline-block"
   },
@@ -56,19 +50,12 @@ const styles = theme =>
     marginRight: theme.spacing(),
     width: 1
   }
-  });
+}));
+
+const LinkEntity: React.FC<LinkEntityProps> = props => {
+  const { children, contentState, entityKey, onEdit, onRemove } = props;
+  const classes = useStyles(props);
 
-const LinkEntity = withStyles(styles, {
-  name: "LinkEntity"
-})(
-  ({
-    classes,
-    children,
-    contentState,
-    entityKey,
-    onEdit,
-    onRemove
-  }: LinkEntityProps & WithStyles<typeof styles>) => {
   const [isOpened, setOpenStatus] = React.useState(false);
   const anchor = React.useRef<HTMLDivElement>();
 
@@ -127,6 +114,5 @@ const LinkEntity = withStyles(styles, {
       </Link>
     </>
   );
-  }
-);
+};
 export default LinkEntity;

src/components/RichTextEditor/RichTextEditor.tsx

@@ -1,9 +1,4 @@
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import { fade } from "@material-ui/core/styles/colorManipulator";
 import Typography from "@material-ui/core/Typography";
 import classNames from "classnames";
@@ -45,8 +40,7 @@ export interface RichTextEditorProps {
   onChange: (event: React.ChangeEvent<any>) => void;
 }
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => ({
   error: {
     color: theme.palette.error.main
   },
@@ -101,7 +95,7 @@ const styles = theme =>
         "&:hover": {
           borderColor: theme.palette.primary.main
         },
-          border: `1px ${theme.overrides.MuiOutlinedInput.root.borderColor} solid`,
+        border: `1px ${theme.palette.divider} solid`,
         borderRadius: 4,
         padding: "27px 12px 10px",
         position: "relative",
@@ -139,7 +133,7 @@ const styles = theme =>
           alignItems: "center",
           background: "none",
           border: "none",
-            borderRight: `1px ${theme.overrides.MuiCard.root.borderColor} solid`,
+          borderRight: `1px ${theme.palette.divider} solid`,
           color: theme.typography.body1.color,
           cursor: "pointer",
           display: "inline-flex",
@@ -160,7 +154,7 @@ const styles = theme =>
           display: "flex"
         },
         background: theme.palette.background.default,
-          border: `1px ${theme.overrides.MuiCard.root.borderColor} solid`,
+        border: `1px ${theme.palette.divider} solid`,
         display: "inline-flex",
         flexWrap: "wrap",
         marginBottom: theme.spacing(),
@@ -171,7 +165,7 @@ const styles = theme =>
       },
       "&-block": {
         "&--blockquote": {
-            borderLeft: `2px solid ${theme.overrides.MuiCard.root.borderColor}`,
+          borderLeft: `2px solid ${theme.palette.divider}`,
           margin: 0,
           padding: theme.spacing(1, 2)
         }
@@ -197,7 +191,7 @@ const styles = theme =>
   smallIcon: {
     marginLeft: 10
   }
-  });
+}));
 
 function handleSave(
   value: any,
@@ -215,17 +209,12 @@ function handleSave(
   }
 }
 
-const RichTextEditor = withStyles(styles, { name: "RichTextEditor" })(
-  ({
-    classes,
-    error,
-    helperText,
-    initial,
-    label,
-    name,
-    scroll,
-    onChange
-  }: RichTextEditorProps & WithStyles<typeof styles>) => (
+const RichTextEditor: React.FC<RichTextEditorProps> = props => {
+  const { error, helperText, initial, label, name, scroll, onChange } = props;
+
+  const classes = useStyles(props);
+
+  return (
     <div
       className={classNames({
         [classes.error]: error,
@@ -302,8 +291,9 @@ const RichTextEditor = withStyles(styles, { name: "RichTextEditor" })(
         </Typography>
       )}
     </div>
-  )
   );
+};
+
 RichTextEditor.displayName = "RichTextEditor";
 RichTextEditor.defaultProps = {
   scroll: true

src/components/RichTextEditor/index.ts

@@ -1,2 +1,2 @@
-export { default } from './RichTextEditor';
-export * from './RichTextEditor';
+export { default } from "./RichTextEditor";
+export * from "./RichTextEditor";

src/components/SaveButtonBar/SaveButtonBar.tsx

@@ -1,11 +1,6 @@
 import Button from "@material-ui/core/Button";
 import Portal from "@material-ui/core/Portal";
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import classNames from "classnames";
 import React from "react";
 import { useIntl } from "react-intl";
@@ -19,8 +14,7 @@ import ConfirmButton, {
 } from "../ConfirmButton/ConfirmButton";
 import Container from "../Container";
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => ({
   button: {
     marginRight: theme.spacing(1)
   },
@@ -45,7 +39,7 @@ const styles = theme =>
   root: {
     background: theme.palette.background.default,
     borderTop: "1px solid transparent",
-      boxShadow: `0 -5px 5px 0 ${theme.overrides.MuiCard.root.borderColor}`,
+    boxShadow: `0 -5px 5px 0 ${theme.palette.divider}`,
     height: "100%",
     transition: `box-shadow ${theme.transitions.duration.shortest}ms`
   },
@@ -54,13 +48,13 @@ const styles = theme =>
   },
   stop: {
     "&$root": {
-        borderTopColor: theme.overrides.MuiCard.root.borderColor,
-        boxShadow: `0 0 0 0 ${theme.overrides.MuiCard.root.borderColor}`
+      borderTopColor: theme.palette.divider,
+      boxShadow: `0 0 0 0 ${theme.palette.divider}`
     }
   }
-  });
+}));
 
-interface SaveButtonBarProps extends WithStyles<typeof styles> {
+interface SaveButtonBarProps {
   disabled: boolean;
   state: ConfirmButtonTransitionState;
   labels?: {
@@ -73,17 +67,18 @@ interface SaveButtonBarProps extends WithStyles<typeof styles> {
   onSave(event: any);
 }
 
-export const SaveButtonBar = withStyles(styles, { name: "SaveButtonBar" })(
-  ({
-    classes,
+export const SaveButtonBar: React.FC<SaveButtonBarProps> = props => {
+  const {
     disabled,
     labels,
     state,
     onCancel,
     onDelete,
     onSave,
-    ...props
-  }: SaveButtonBarProps) => {
+    ...rest
+  } = props;
+  const classes = useStyles(props);
+
   const intl = useIntl();
   const scrollPosition = useWindowScroll();
   const scrolledToBottom =
@@ -98,7 +93,7 @@ export const SaveButtonBar = withStyles(styles, { name: "SaveButtonBar" })(
               className={classNames(classes.root, {
                 [classes.stop]: scrolledToBottom
               })}
-                {...props}
+              {...rest}
             >
               <Container className={classes.container}>
                 {!!onDelete && (
@@ -143,7 +138,6 @@ export const SaveButtonBar = withStyles(styles, { name: "SaveButtonBar" })(
       }
     </AppActionContext.Consumer>
   );
-  }
-);
+};
 SaveButtonBar.displayName = "SaveButtonBar";
 export default SaveButtonBar;

src/components/SaveFilterTabDialog/index.ts

@@ -1,2 +1,2 @@
-export { default } from './SaveFilterTabDialog';
-export * from './SaveFilterTabDialog';
+export { default } from "./SaveFilterTabDialog";
+export * from "./SaveFilterTabDialog";

src/components/SeoForm/SeoForm.tsx

@@ -1,12 +1,7 @@
 import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import Typography from "@material-ui/core/Typography";
 import classNames from "classnames";
@@ -16,8 +11,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import CardTitle from "../CardTitle";
 import FormSpacer from "../FormSpacer";
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => ({
   addressBar: {
     color: "#006621",
     fontSize: "13px",
@@ -62,9 +56,9 @@ const styles = theme =>
     textDecoration: "none",
     wordWrap: "break-word"
   }
-  });
+}));
 
-interface SeoFormProps extends WithStyles<typeof styles> {
+interface SeoFormProps {
   description?: string;
   descriptionPlaceholder: string;
   disabled?: boolean;
@@ -76,9 +70,8 @@ interface SeoFormProps extends WithStyles<typeof styles> {
   onClick?();
 }
 
-const SeoForm = withStyles(styles, { name: "SeoForm" })(
-  ({
-    classes,
+const SeoForm: React.FC<SeoFormProps> = props => {
+  const {
     description,
     descriptionPlaceholder,
     disabled,
@@ -87,7 +80,9 @@ const SeoForm = withStyles(styles, { name: "SeoForm" })(
     title,
     titlePlaceholder,
     onChange
-  }: SeoFormProps) => {
+  } = props;
+  const classes = useStyles(props);
+
   const intl = useIntl();
   const [expanded, setExpansionStatus] = React.useState(false);
   const toggleExpansion = () => setExpansionStatus(!expanded);
@@ -187,7 +182,6 @@ const SeoForm = withStyles(styles, { name: "SeoForm" })(
       </CardContent>
     </Card>
   );
-  }
-);
+};
 SeoForm.displayName = "SeoForm";
 export default SeoForm;

src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx

@@ -1,5 +1,5 @@
 import { InputProps } from "@material-ui/core/Input";
-import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import Downshift from "downshift";
 import { filter } from "fuzzaldrin";
@@ -13,7 +13,7 @@ import { FetchMoreProps } from "@saleor/types";
 import ArrowDropdownIcon from "../../icons/ArrowDropdown";
 import Debounce, { DebounceProps } from "../Debounce";
 
-const styles = createStyles({
+const useStyles = makeStyles({
   container: {
     flexGrow: 1,
     position: "relative"
@@ -42,12 +42,12 @@ const DebounceAutocomplete: React.ComponentType<
   DebounceProps<string>
 > = Debounce;
 
-const SingleAutocompleteSelectFieldComponent = withStyles(styles, {
-  name: "SingleAutocompleteSelectField"
-})(
-  ({
+const SingleAutocompleteSelectFieldComponent: React.FC<
+  SingleAutocompleteSelectFieldProps
+> = props => {
+  const {
     choices,
-    classes,
+
     allowCustomValues,
     disabled,
     displayValue,
@@ -64,8 +64,10 @@ const SingleAutocompleteSelectFieldComponent = withStyles(styles, {
     fetchChoices,
     onChange,
     onFetchMore,
-    ...props
-  }: SingleAutocompleteSelectFieldProps & WithStyles<typeof styles>) => {
+    ...rest
+  } = props;
+  const classes = useStyles(props);
+
   const [prevDisplayValue] = useStateFromProps(displayValue);
 
   const handleChange = item =>
@@ -117,7 +119,7 @@ const SingleAutocompleteSelectFieldComponent = withStyles(styles, {
               );
 
             return (
-                <div className={classes.container} {...props}>
+              <div className={classes.container} {...rest}>
                 <TextField
                   InputProps={{
                     ...InputProps,
@@ -162,12 +164,11 @@ const SingleAutocompleteSelectFieldComponent = withStyles(styles, {
       )}
     </DebounceAutocomplete>
   );
-  }
-);
+};
 
 const SingleAutocompleteSelectField: React.FC<
   SingleAutocompleteSelectFieldProps
-> = ({ choices, fetchChoices, ...props }) => {
+> = ({ choices, fetchChoices, ...rest }) => {
   const [query, setQuery] = React.useState("");
   if (fetchChoices) {
     return (
@@ -175,7 +176,7 @@ const SingleAutocompleteSelectField: React.FC<
         {debounceFn => (
           <SingleAutocompleteSelectFieldComponent
             choices={choices}
-            {...props}
+            {...rest}
             fetchChoices={debounceFn}
           />
         )}
@@ -189,7 +190,7 @@ const SingleAutocompleteSelectField: React.FC<
       choices={filter(choices, query, {
         key: "label"
       })}
-      {...props}
+      {...rest}
     />
   );
 };

src/components/SingleSelectField/SingleSelectField.tsx

@@ -4,12 +4,12 @@ import InputLabel from "@material-ui/core/InputLabel";
 import MenuItem from "@material-ui/core/MenuItem";
 import OutlinedInput from "@material-ui/core/OutlinedInput";
 import Select, { SelectProps } from "@material-ui/core/Select";
-import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import classNames from "classnames";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
-const styles = createStyles({
+const useStyles = makeStyles({
   formControl: {
     "& label": {
       top: "-3px"
@@ -18,7 +18,7 @@ const styles = createStyles({
   }
 });
 
-interface SingleSelectFieldProps extends WithStyles<typeof styles> {
+interface SingleSelectFieldProps {
   choices: Array<{
     value: string;
     label: string | React.ReactNode;
@@ -35,12 +35,10 @@ interface SingleSelectFieldProps extends WithStyles<typeof styles> {
   onChange(event: any);
 }
 
-export const SingleSelectField = withStyles(styles, {
-  name: "SingleSelectField"
-})(
-  ({
+export const SingleSelectField: React.FC<SingleSelectFieldProps> = props => {
+  const {
     className,
-    classes,
+
     disabled,
     error,
     label,
@@ -51,7 +49,9 @@ export const SingleSelectField = withStyles(styles, {
     hint,
     selectProps,
     placeholder
-  }: SingleSelectFieldProps) => {
+  } = props;
+  const classes = useStyles(props);
+
   const choicesByKey: { [key: string]: string } =
     choices === undefined
       ? {}
@@ -93,7 +93,6 @@ export const SingleSelectField = withStyles(styles, {
       {hint && <FormHelperText>{hint}</FormHelperText>}
     </FormControl>
   );
-  }
-);
+};
 SingleSelectField.displayName = "SingleSelectField";
 export default SingleSelectField;

src/components/Skeleton.tsx

@@ -1,14 +1,8 @@
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import classNames from "classnames";
 import React from "react";
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => ({
   "@keyframes skeleton-animation": {
     "0%": {
       opacity: 0.6
@@ -30,16 +24,20 @@ const styles = theme =>
     height: "0.8em",
     margin: "0.2em 0"
   }
-  });
+}));
 
-interface SkeletonProps extends WithStyles<typeof styles> {
+interface SkeletonProps {
   className?: string;
   primary?: boolean;
   style?: React.CSSProperties;
 }
 
-const Skeleton = withStyles(styles, { name: "Skeleton" })(
-  ({ className, classes, primary, style }: SkeletonProps) => (
+const Skeleton: React.FC<SkeletonProps> = props => {
+  const { className, primary, style } = props;
+
+  const classes = useStyles(props);
+
+  return (
     <span
       className={classNames(classes.skeleton, className, {
         [classes.primary]: primary
@@ -48,8 +46,8 @@ const Skeleton = withStyles(styles, { name: "Skeleton" })(
     >
       &zwnj;
     </span>
-  )
   );
+};
 
 Skeleton.displayName = "Skeleton";
 export default Skeleton;

src/components/SortableTable/SortableTableBody.tsx

@@ -20,13 +20,14 @@ const useStyles = makeStyles(theme => ({
     },
     background: theme.palette.background.paper,
     fontFamily: theme.typography.fontFamily,
-    fontSize: theme.overrides.MuiTableCell.root.fontSize,
+    // FIXME: you damn know what
+    // fontSize: theme.overrides.MuiTableCell.root.fontSize,
     opacity: 0.5
   }
 }));
 
 const SortableTableBody: React.FC<
-  TableBodyProps & SortableTableBodyProps
+  Omit<TableBodyProps & SortableTableBodyProps, "ref">
 > = props => {
   const classes = useStyles({});
 

src/components/StatusLabel/StatusLabel.tsx

@@ -1,15 +1,10 @@
 import yellow from "@material-ui/core/colors/yellow";
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import Typography, { TypographyProps } from "@material-ui/core/Typography";
 import classNames from "classnames";
 import React from "react";
 
-const styles = theme => {
+const useStyles = makeStyles(theme => {
   const dot = {
     borderRadius: "100%",
     content: "''",
@@ -20,7 +15,8 @@ const styles = theme => {
     top: "calc(50% - 5px)",
     width: 8
   };
-  return createStyles({
+
+  return {
     errorDot: {
       "&:before": { backgroundColor: theme.palette.error.main, ...dot }
     },
@@ -38,24 +34,22 @@ const styles = theme => {
     successDot: {
       "&:before": { backgroundColor: theme.palette.primary.main, ...dot }
     }
-  });
   };
+});
 
-interface StatusLabelProps extends WithStyles<typeof styles> {
+interface StatusLabelProps {
   className?: string;
   label: string | React.ReactNode;
   status: "success" | "neutral" | "error" | string;
   typographyProps?: TypographyProps;
 }
 
-const StatusLabel = withStyles(styles, { name: "StatusLabel" })(
-  ({
-    classes,
-    className,
-    label,
-    status,
-    typographyProps
-  }: StatusLabelProps) => (
+const StatusLabel: React.FC<StatusLabelProps> = props => {
+  const { className, label, status, typographyProps } = props;
+
+  const classes = useStyles(props);
+
+  return (
     <div
       className={classNames({
         [classes.root]: true,
@@ -77,7 +71,7 @@ const StatusLabel = withStyles(styles, { name: "StatusLabel" })(
         label
       )}
     </div>
-  )
   );
+};
 StatusLabel.displayName = "StatusLabel";
 export default StatusLabel;

src/components/Tab/Tab.tsx

@@ -1,16 +1,11 @@
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import { fade } from "@material-ui/core/styles/colorManipulator";
 import Typography from "@material-ui/core/Typography";
 import classNames from "classnames";
 import React from "react";
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(
+  theme => ({
     active: {
       color: theme.typography.caption.color
     },
@@ -35,17 +30,23 @@ const styles = theme =>
       padding: theme.spacing(1),
       transition: theme.transitions.duration.short + "ms"
     }
-  });
+  }),
+  { name: "Tab" }
+);
 
-interface TabProps<T> extends WithStyles<typeof styles> {
+interface TabProps<T> {
   children?: React.ReactNode;
   isActive: boolean;
   changeTab: (index: T) => void;
 }
 
 export function Tab<T>(value: T) {
-  return withStyles(styles, { name: "Tab" })(
-    ({ classes, children, isActive, changeTab }: TabProps<T>) => (
+  const Component: React.FC<TabProps<T>> = props => {
+    const { children, isActive, changeTab } = props;
+
+    const classes = useStyles(props);
+
+    return (
       <Typography
         component="span"
         className={classNames({
@@ -56,8 +57,10 @@ export function Tab<T>(value: T) {
       >
         {children}
       </Typography>
-    )
     );
+  };
+
+  return Component;
 }
 
 export default Tab;

src/components/Tab/TabContainer.tsx

@@ -1,27 +1,23 @@
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import React from "react";
 
 export interface TabContainerProps {
   children: React.ReactNode | React.ReactNodeArray;
 }
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => ({
   root: {
-      borderBottom: `1px solid ${theme.overrides.MuiCard.root.borderColor}`
+    borderBottom: `1px solid ${theme.palette.divider}`
   }
-  });
+}));
 
-const TabContainer = withStyles(styles, {
-  name: "TabContainer"
-})(({ classes, children }: TabContainerProps & WithStyles<typeof styles>) => (
-  <div className={classes.root}>{children}</div>
-));
+const TabContainer: React.FC<TabContainerProps> = props => {
+  const { children } = props;
+
+  const classes = useStyles(props);
+
+  return <div className={classes.root}>{children}</div>;
+};
 TabContainer.displayName = "TabContainer";
 
 export default TabContainer;

src/components/Tab/Tabs.tsx

@@ -1,12 +1,10 @@
 import React from "react";
 
 export interface TabsProps {
-  children: (
-    props: {
+  children: (props: {
     changeTab: (index: number) => void;
     currentTab: number;
-    }
-  ) => React.ReactNode;
+  }) => React.ReactNode;
 }
 
 interface TabsState {

src/components/TableCellAvatar/TableCellAvatar.tsx

@@ -1,10 +1,5 @@
 import Avatar from "@material-ui/core/Avatar";
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import TableCell from "@material-ui/core/TableCell";
 import Cached from "@material-ui/icons/Cached";
 import classNames from "classnames";
@@ -14,15 +9,14 @@ import Image from "../../icons/Image";
 
 export const AVATAR_MARGIN = 56;
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => ({
   avatar: {
     background: "none",
-      border: `1px solid ${theme.overrides.MuiCard.root.borderColor}`,
+    border: `1px solid ${theme.palette}`,
     borderRadius: 2,
     color: "#bdbdbd",
     display: "inline-flex",
-      padding: theme.spacing(.5)
+    padding: theme.spacing(0.5)
   },
   children: {
     alignSelf: "center",
@@ -37,25 +31,22 @@ const styles = theme =>
     paddingRight: theme.spacing(3),
     width: "1%"
   }
-  });
+}));
 
-interface TableCellAvatarProps extends WithStyles<typeof styles> {
+interface TableCellAvatarProps {
   className?: string;
   thumbnail?: string;
   avatarProps?: string;
   children?: React.ReactNode | React.ReactNodeArray;
 }
 
-const TableCellAvatar = withStyles(styles, { name: "TableCellAvatar" })(
-  ({
-    classes,
-    children,
-    className,
-    thumbnail,
-    avatarProps,
-    ...props
-  }: TableCellAvatarProps) => (
-    <TableCell className={classNames(classes.root, className)} {...props}>
+const TableCellAvatar: React.FC<TableCellAvatarProps> = props => {
+  const { children, className, thumbnail, avatarProps, ...rest } = props;
+
+  const classes = useStyles(props);
+
+  return (
+    <TableCell className={classNames(classes.root, className)} {...rest}>
       <div className={classes.content}>
         {thumbnail === undefined ? (
           <Avatar className={classNames(classes.avatar, avatarProps)}>
@@ -74,7 +65,7 @@ const TableCellAvatar = withStyles(styles, { name: "TableCellAvatar" })(
         <div className={classes.children}>{children}</div>
       </div>
     </TableCell>
-  )
   );
+};
 TableCellAvatar.displayName = "TableCellAvatar";
 export default TableCellAvatar;

src/components/TableFilter/FilterChips.tsx

@@ -6,7 +6,6 @@ import ClearIcon from "@material-ui/icons/Clear";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
-import Filter from "../Filter";
 import FilterActions, { FilterActionsProps } from "../Filter/FilterActions";
 import Hr from "../Hr";
 import Link from "../Link";

src/components/TableFilter/FilterTab.tsx

@@ -1,15 +1,9 @@
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import Tab from "@material-ui/core/Tab";
 import classNames from "classnames";
 import React from "react";
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => ({
   selectedTabLabel: {
     "&$tabLabel": {
       color: theme.typography.body1.color
@@ -29,17 +23,21 @@ const styles = theme =>
     paddingTop: theme.spacing(1),
     textTransform: "initial" as "initial"
   }
-  });
+}));
 
-interface FilterTabProps extends WithStyles<typeof styles> {
+interface FilterTabProps {
   onClick: () => void;
   label: string;
   selected?: boolean;
   value?: number;
 }
 
-export const FilterTab = withStyles(styles, { name: "FilterTab" })(
-  ({ classes, onClick, label, selected, value }: FilterTabProps) => (
+export const FilterTab: React.FC<FilterTabProps> = props => {
+  const { onClick, label, selected, value } = props;
+
+  const classes = useStyles(props);
+
+  return (
     <Tab
       disableRipple
       label={label}
@@ -52,7 +50,7 @@ export const FilterTab = withStyles(styles, { name: "FilterTab" })(
       onClick={onClick}
       value={value}
     />
-  )
   );
+};
 FilterTab.displayName = "FilterTab";
 export default FilterTab;

src/components/TableFilter/FilterTabs.tsx

@@ -1,27 +1,25 @@
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import Tabs from "@material-ui/core/Tabs";
 import React from "react";
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => ({
   tabsRoot: {
-      borderBottom: `1px solid ${theme.overrides.MuiCard.root.borderColor}`,
+    borderBottom: `1px solid ${theme.palette.divider}`,
     paddingLeft: theme.spacing(3)
   }
-  });
+}));
 
-interface FilterTabsProps extends WithStyles<typeof styles> {
+interface FilterTabsProps {
   children?: React.ReactNode;
   currentTab: number;
 }
 
-export const FilterTabs = withStyles(styles, { name: "FilterTabs" })(
-  ({ classes, children, currentTab }: FilterTabsProps) => (
+export const FilterTabs: React.FC<FilterTabsProps> = props => {
+  const { children, currentTab } = props;
+
+  const classes = useStyles(props);
+
+  return (
     <Tabs
       className={classes.tabsRoot}
       value={currentTab}
@@ -29,7 +27,7 @@ export const FilterTabs = withStyles(styles, { name: "FilterTabs" })(
     >
       {children}
     </Tabs>
-  )
   );
+};
 
 export default FilterTabs;