diff --git a/src/attributes/components/AttributeList/AttributeList.tsx b/src/attributes/components/AttributeList/AttributeList.tsx
index caa17b28e..5f17abb10 100644
--- a/src/attributes/components/AttributeList/AttributeList.tsx
+++ b/src/attributes/components/AttributeList/AttributeList.tsx
@@ -20,41 +20,44 @@ export interface AttributeListProps extends ListProps, ListActions {
   attributes: AttributeList_attributes_edges_node[];
 }
 
-const useStyles = makeStyles(theme => ({
-  [theme.breakpoints.up("lg")]: {
+const useStyles = makeStyles(
+  theme => ({
+    [theme.breakpoints.up("lg")]: {
+      colFaceted: {
+        width: 150
+      },
+      colName: {
+        width: "auto"
+      },
+      colSearchable: {
+        width: 150
+      },
+      colSlug: {
+        width: 200
+      },
+      colVisible: {
+        width: 150
+      }
+    },
     colFaceted: {
-      width: 150
-    },
-    colName: {
-      width: "auto"
+      textAlign: "center"
     },
+    colName: {},
     colSearchable: {
-      width: 150
+      textAlign: "center"
     },
     colSlug: {
-      width: 200
+      paddingLeft: 0
     },
     colVisible: {
-      width: 150
+      textAlign: "center"
+    },
+    link: {
+      cursor: "pointer"
     }
-  },
-  colFaceted: {
-    textAlign: "center"
-  },
-  colName: {},
-  colSearchable: {
-    textAlign: "center"
-  },
-  colSlug: {
-    paddingLeft: 0
-  },
-  colVisible: {
-    textAlign: "center"
-  },
-  link: {
-    cursor: "pointer"
-  }
-}));
+  }),
+  { name: "AttributeList" }
+);
 
 const numberOfColumns = 6;
 
diff --git a/src/attributes/components/AttributeValues/AttributeValues.tsx b/src/attributes/components/AttributeValues/AttributeValues.tsx
index c0e340d02..2cdd5c229 100644
--- a/src/attributes/components/AttributeValues/AttributeValues.tsx
+++ b/src/attributes/components/AttributeValues/AttributeValues.tsx
@@ -29,29 +29,32 @@ export interface AttributeValuesProps {
   onValueUpdate: (id: string) => void;
 }
 
-const useStyles = makeStyles(theme => ({
-  columnAdmin: {
-    width: "50%"
-  },
-  columnDrag: {
-    width: 48 + theme.spacing(1.5)
-  },
-  columnStore: {
-    width: "50%"
-  },
-  dragIcon: {
-    cursor: "grab"
-  },
-  iconCell: {
-    "&:last-child": {
-      paddingRight: theme.spacing()
+const useStyles = makeStyles(
+  theme => ({
+    columnAdmin: {
+      width: "50%"
     },
-    width: 48 + theme.spacing(1.5)
-  },
-  link: {
-    cursor: "pointer"
-  }
-}));
+    columnDrag: {
+      width: 48 + theme.spacing(1.5)
+    },
+    columnStore: {
+      width: "50%"
+    },
+    dragIcon: {
+      cursor: "grab"
+    },
+    iconCell: {
+      "&:last-child": {
+        paddingRight: theme.spacing()
+      },
+      width: 48 + theme.spacing(1.5)
+    },
+    link: {
+      cursor: "pointer"
+    }
+  }),
+  { name: "AttributeValues" }
+);
 
 const AttributeValues: React.FC<AttributeValuesProps> = ({
   disabled,
diff --git a/src/categories/components/CategoryBackground/CategoryBackground.tsx b/src/categories/components/CategoryBackground/CategoryBackground.tsx
index 8e340e304..80cb662d1 100644
--- a/src/categories/components/CategoryBackground/CategoryBackground.tsx
+++ b/src/categories/components/CategoryBackground/CategoryBackground.tsx
@@ -15,28 +15,31 @@ import { FormattedMessage, useIntl } from "react-intl";
 import { CategoryDetails_category_backgroundImage } from "../../types/CategoryDetails";
 import { FormData } from "../CategoryUpdatePage";
 
-const useStyles = makeStyles(theme => ({
-  fileField: {
-    display: "none"
-  },
-  image: {
-    height: "100%",
-    objectFit: "contain",
-    userSelect: "none",
-    width: "100%"
-  },
-  imageContainer: {
-    background: "#ffffff",
-    border: "1px solid #eaeaea",
-    borderRadius: theme.spacing(),
-    height: 148,
-    justifySelf: "start",
-    overflow: "hidden",
-    padding: theme.spacing(2),
-    position: "relative",
-    width: 148
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    fileField: {
+      display: "none"
+    },
+    image: {
+      height: "100%",
+      objectFit: "contain",
+      userSelect: "none",
+      width: "100%"
+    },
+    imageContainer: {
+      background: "#ffffff",
+      border: "1px solid #eaeaea",
+      borderRadius: theme.spacing(),
+      height: 148,
+      justifySelf: "start",
+      overflow: "hidden",
+      padding: theme.spacing(2),
+      position: "relative",
+      width: 148
+    }
+  }),
+  { name: "CategoryBackground" }
+);
 
 export interface CategoryBackgroundProps {
   data: FormData;
diff --git a/src/components/AddressEdit/AddressEdit.tsx b/src/components/AddressEdit/AddressEdit.tsx
index ebb4b9d5c..c4c63e358 100644
--- a/src/components/AddressEdit/AddressEdit.tsx
+++ b/src/components/AddressEdit/AddressEdit.tsx
@@ -11,13 +11,16 @@ import SingleAutocompleteSelectField, {
   SingleAutocompleteChoiceType
 } from "../SingleAutocompleteSelectField";
 
-const useStyles = makeStyles(theme => ({
-  root: {
-    display: "grid",
-    gridColumnGap: theme.spacing(2),
-    gridTemplateColumns: "1fr 1fr"
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    root: {
+      display: "grid",
+      gridColumnGap: theme.spacing(2),
+      gridTemplateColumns: "1fr 1fr"
+    }
+  }),
+  { name: "AddressEdit" }
+);
 
 interface AddressEditProps {
   countries: SingleAutocompleteChoiceType[];
diff --git a/src/components/AppHeader/AppHeader.tsx b/src/components/AppHeader/AppHeader.tsx
index f7e941fba..5e5e11138 100644
--- a/src/components/AppHeader/AppHeader.tsx
+++ b/src/components/AppHeader/AppHeader.tsx
@@ -11,44 +11,47 @@ export interface AppHeaderProps {
   onBack();
 }
 
-const useStyles = makeStyles(theme => ({
-  backArrow: {
-    fontSize: 30
-  },
-  menuButton: {
-    flex: "0 0 auto",
-    marginLeft: -theme.spacing(2),
-    marginRight: theme.spacing(),
-    marginTop: -theme.spacing(2)
-  },
-  root: {
-    "&:hover": {
-      color: theme.typography.body1.color
+const useStyles = makeStyles(
+  theme => ({
+    backArrow: {
+      fontSize: 30
     },
-    alignItems: "center",
-    color: theme.palette.grey[500],
-    cursor: "pointer",
-    display: "flex",
-    marginTop: theme.spacing(0.5),
-    transition: theme.transitions.duration.standard + "ms",
-    [theme.breakpoints.down("sm")]: {
-      display: "none"
+    menuButton: {
+      flex: "0 0 auto",
+      marginLeft: -theme.spacing(2),
+      marginRight: theme.spacing(),
+      marginTop: -theme.spacing(2)
+    },
+    root: {
+      "&:hover": {
+        color: theme.typography.body1.color
+      },
+      alignItems: "center",
+      color: theme.palette.grey[500],
+      cursor: "pointer",
+      display: "flex",
+      marginTop: theme.spacing(0.5),
+      transition: theme.transitions.duration.standard + "ms",
+      [theme.breakpoints.down("sm")]: {
+        display: "none"
+      }
+    },
+    skeleton: {
+      marginBottom: theme.spacing(2),
+      width: "10rem"
+    },
+    title: {
+      color: "inherit",
+      flex: 1,
+      marginLeft: theme.spacing(),
+      textTransform: "uppercase",
+      [theme.breakpoints.down("sm")]: {
+        display: "none"
+      }
     }
-  },
-  skeleton: {
-    marginBottom: theme.spacing(2),
-    width: "10rem"
-  },
-  title: {
-    color: "inherit",
-    flex: 1,
-    marginLeft: theme.spacing(),
-    textTransform: "uppercase",
-    [theme.breakpoints.down("sm")]: {
-      display: "none"
-    }
-  }
-}));
+  }),
+  { name: "AppHeader" }
+);
 
 const AppHeader: React.FC<AppHeaderProps> = props => {
   const { children, onBack } = props;
diff --git a/src/components/AppLayout/MenuList.tsx b/src/components/AppLayout/MenuList.tsx
index 4e29d600b..a77814a1f 100644
--- a/src/components/AppLayout/MenuList.tsx
+++ b/src/components/AppLayout/MenuList.tsx
@@ -19,41 +19,92 @@ import { orderDraftListUrl, orderListUrl } from "../../orders/urls";
 import MenuNested from "./MenuNested";
 import { IMenuItem } from "./menuStructure";
 
-const useStyles = makeStyles(theme => ({
-  menuIcon: {
-    "& svg": {
-      height: 32,
-      width: 32
+const useStyles = makeStyles(
+  theme => ({
+    menuIcon: {
+      "& svg": {
+        height: 32,
+        width: 32
+      },
+      display: "inline-block",
+      position: "relative",
+      top: 8
     },
-    display: "inline-block",
-    position: "relative",
-    top: 8
-  },
-  menuIconDark: {
-    "& path": {
-      fill: theme.palette.common.white
-    }
-  },
-  menuIconSmall: {
-    left: -5
-  },
-  menuIsActive: {
-    boxShadow: "0px 0px 12px 1px rgba(0,0,0,0.2)"
-  },
-  menuItemHover: {
-    "& p": {
-      fontSize: 14,
-      transition: "color 0.5s ease, opacity 0.3s ease-out"
+    menuIconDark: {
+      "& path": {
+        fill: theme.palette.common.white
+      }
     },
-    "& path": {
-      transition: "fill 0.5s ease"
+    menuIconSmall: {
+      left: -5
     },
-    "&:hover": {
+    menuIsActive: {
+      boxShadow: "0px 0px 12px 1px rgba(0,0,0,0.2)"
+    },
+    menuItemHover: {
       "& p": {
+        fontSize: 14,
+        transition: "color 0.5s ease, opacity 0.3s ease-out"
+      },
+      "& path": {
+        transition: "fill 0.5s ease"
+      },
+      "&:hover": {
+        "& p": {
+          color: theme.palette.primary.main
+        },
+        "& path": {
+          fill: theme.palette.primary.main
+        },
+        "&:before": {
+          borderLeft: `solid 2px ${theme.palette.primary.main}`,
+          content: "''",
+          height: 33,
+          left: -20,
+          position: "absolute",
+          top: 8
+        },
+        color: theme.palette.primary.main
+      },
+      cursor: "pointer",
+      position: "relative"
+    },
+    menuList: {
+      display: "flex",
+      flexDirection: "column",
+      height: "100%",
+      marginLeft: theme.spacing(4),
+      marginTop: theme.spacing(2),
+      paddingBottom: theme.spacing(3)
+    },
+    menuListItem: {
+      alignItems: "center",
+      display: "block",
+      marginBottom: theme.spacing(5),
+      paddingLeft: 0,
+      textDecoration: "none",
+      transition: theme.transitions.duration.standard + "ms"
+    },
+    menuListItemActive: {
+      "& $menuListItemText": {
         color: theme.palette.primary.main
       },
       "& path": {
+        color: theme.palette.primary.main,
         fill: theme.palette.primary.main
+      }
+    },
+    menuListItemOpen: {
+      "&:after": {
+        borderBottom: `10px solid transparent`,
+        borderLeft: `10px solid ${theme.palette.background.paper}`,
+        borderTop: `10px solid transparent`,
+        content: "''",
+        height: 0,
+        position: "absolute",
+        right: -30,
+        top: 15,
+        width: 0
       },
       "&:before": {
         borderLeft: `solid 2px ${theme.palette.primary.main}`,
@@ -63,97 +114,49 @@ const useStyles = makeStyles(theme => ({
         position: "absolute",
         top: 8
       },
-      color: theme.palette.primary.main
+      position: "relative"
     },
-    cursor: "pointer",
-    position: "relative"
-  },
-  menuList: {
-    display: "flex",
-    flexDirection: "column",
-    height: "100%",
-    marginLeft: theme.spacing(4),
-    marginTop: theme.spacing(2),
-    paddingBottom: theme.spacing(3)
-  },
-  menuListItem: {
-    alignItems: "center",
-    display: "block",
-    marginBottom: theme.spacing(5),
-    paddingLeft: 0,
-    textDecoration: "none",
-    transition: theme.transitions.duration.standard + "ms"
-  },
-  menuListItemActive: {
-    "& $menuListItemText": {
-      color: theme.palette.primary.main
+    menuListItemText: {
+      "&:hover": {
+        color: theme.palette.primary.main
+      },
+      bottom: 0,
+      cursor: "pointer",
+      fontSize: "1rem",
+      fontWeight: 500,
+      left: 30,
+      opacity: 1,
+      paddingLeft: 16,
+      position: "absolute",
+      textTransform: "uppercase",
+      transition: "opacity 0.5s ease"
     },
-    "& path": {
-      color: theme.palette.primary.main,
-      fill: theme.palette.primary.main
+    menuListItemTextHide: {
+      bottom: 0,
+      left: 30,
+      opacity: 0,
+      position: "absolute"
+    },
+    subMenu: {
+      padding: "0 15px"
+    },
+    subMenuDrawer: {
+      background: "#000",
+      cursor: "pointer",
+      height: "100vh",
+      left: 0,
+      opacity: 0.2,
+      position: "absolute",
+      top: 0,
+      width: 0,
+      zIndex: -2
+    },
+    subMenuDrawerOpen: {
+      width: `100vw`
     }
-  },
-  menuListItemOpen: {
-    "&:after": {
-      borderBottom: `10px solid transparent`,
-      borderLeft: `10px solid ${theme.palette.background.paper}`,
-      borderTop: `10px solid transparent`,
-      content: "''",
-      height: 0,
-      position: "absolute",
-      right: -30,
-      top: 15,
-      width: 0
-    },
-    "&:before": {
-      borderLeft: `solid 2px ${theme.palette.primary.main}`,
-      content: "''",
-      height: 33,
-      left: -20,
-      position: "absolute",
-      top: 8
-    },
-    position: "relative"
-  },
-  menuListItemText: {
-    "&:hover": {
-      color: theme.palette.primary.main
-    },
-    bottom: 0,
-    cursor: "pointer",
-    fontSize: "1rem",
-    fontWeight: 500,
-    left: 30,
-    opacity: 1,
-    paddingLeft: 16,
-    position: "absolute",
-    textTransform: "uppercase",
-    transition: "opacity 0.5s ease"
-  },
-  menuListItemTextHide: {
-    bottom: 0,
-    left: 30,
-    opacity: 0,
-    position: "absolute"
-  },
-  subMenu: {
-    padding: "0 15px"
-  },
-  subMenuDrawer: {
-    background: "#000",
-    cursor: "pointer",
-    height: "100vh",
-    left: 0,
-    opacity: 0.2,
-    position: "absolute",
-    top: 0,
-    width: 0,
-    zIndex: -2
-  },
-  subMenuDrawerOpen: {
-    width: `100vw`
-  }
-}));
+  }),
+  { name: "MenuList" }
+);
 
 interface MenuListProps {
   className?: string;
diff --git a/src/components/AppLayout/MenuNested.tsx b/src/components/AppLayout/MenuNested.tsx
index 978882807..57e81dd7c 100644
--- a/src/components/AppLayout/MenuNested.tsx
+++ b/src/components/AppLayout/MenuNested.tsx
@@ -12,89 +12,92 @@ import { drawerNestedMenuWidth, drawerWidthExpandedMobile } from "./consts";
 import { IActiveSubMenu } from "./MenuList";
 import { IMenuItem } from "./menuStructure";
 
-const useStyles = makeStyles(theme => ({
-  menuListNested: {
-    background: theme.palette.background.paper,
-    height: "100vh",
-    position: "absolute",
-    right: 0,
-    top: 0,
-    transition: `right  ${theme.transitions.duration.shorter}ms ease`,
-    width: drawerNestedMenuWidth,
-    zIndex: -1
-  },
-  menuListNestedClose: {
-    "& svg": {
-      fill: theme.palette.primary.main,
-      left: 11,
-      position: "relative",
-      top: 1
+const useStyles = makeStyles(
+  theme => ({
+    menuListNested: {
+      background: theme.palette.background.paper,
+      height: "100vh",
+      position: "absolute",
+      right: 0,
+      top: 0,
+      transition: `right  ${theme.transitions.duration.shorter}ms ease`,
+      width: drawerNestedMenuWidth,
+      zIndex: -1
     },
-    border: `solid 1px #EAEAEA`,
-    borderRadius: "100%",
-    cursor: "pointer",
-    height: 32,
-    position: "absolute",
-    right: 32,
-    top: 35,
-    transform: "rotate(180deg)",
-    width: 32
-  },
-  menuListNestedCloseDark: {
-    border: `solid 1px #252728`
-  },
-  menuListNestedHide: {
-    opacity: 0
-  },
-  menuListNestedIcon: {
-    "& path": {
-      fill: "initial"
+    menuListNestedClose: {
+      "& svg": {
+        fill: theme.palette.primary.main,
+        left: 11,
+        position: "relative",
+        top: 1
+      },
+      border: `solid 1px #EAEAEA`,
+      borderRadius: "100%",
+      cursor: "pointer",
+      height: 32,
+      position: "absolute",
+      right: 32,
+      top: 35,
+      transform: "rotate(180deg)",
+      width: 32
     },
-    "& svg": { height: 32, position: "relative", top: 7, width: 32 }
-  },
-  menuListNestedIconDark: {
-    "& path": {
-      fill: theme.palette.common.white
-    }
-  },
-  menuListNestedItem: {
-    "&:hover": {
-      "& p": {
-        color: theme.palette.primary.main
+    menuListNestedCloseDark: {
+      border: `solid 1px #252728`
+    },
+    menuListNestedHide: {
+      opacity: 0
+    },
+    menuListNestedIcon: {
+      "& path": {
+        fill: "initial"
+      },
+      "& svg": { height: 32, position: "relative", top: 7, width: 32 }
+    },
+    menuListNestedIconDark: {
+      "& path": {
+        fill: theme.palette.common.white
       }
     },
-    display: "block",
-    marginBottom: theme.spacing(2),
-    padding: "0px 30px",
-    textDecoration: "none"
-  },
-  menuListNestedOpen: {
-    [theme.breakpoints.down("sm")]: {
-      right: 0,
-      width: drawerWidthExpandedMobile,
-      zIndex: 2
+    menuListNestedItem: {
+      "&:hover": {
+        "& p": {
+          color: theme.palette.primary.main
+        }
+      },
+      display: "block",
+      marginBottom: theme.spacing(2),
+      padding: "0px 30px",
+      textDecoration: "none"
     },
-    right: -drawerNestedMenuWidth,
-    width: drawerNestedMenuWidth,
-    zIndex: -1
-  },
-  subHeader: {
-    borderBottom: "solid 1px #EAEAEA",
-    margin: "30px",
-    marginBottom: 39,
-    paddingBottom: 22
-  },
-  subHeaderDark: {
-    borderBottom: "solid 1px #252728"
-  },
-  subHeaderTitle: {
-    [theme.breakpoints.up("md")]: {
-      paddingLeft: 0
+    menuListNestedOpen: {
+      [theme.breakpoints.down("sm")]: {
+        right: 0,
+        width: drawerWidthExpandedMobile,
+        zIndex: 2
+      },
+      right: -drawerNestedMenuWidth,
+      width: drawerNestedMenuWidth,
+      zIndex: -1
     },
-    display: "inline",
-    paddingLeft: 10
-  }
-}));
+    subHeader: {
+      borderBottom: "solid 1px #EAEAEA",
+      margin: "30px",
+      marginBottom: 39,
+      paddingBottom: 22
+    },
+    subHeaderDark: {
+      borderBottom: "solid 1px #252728"
+    },
+    subHeaderTitle: {
+      [theme.breakpoints.up("md")]: {
+        paddingLeft: 0
+      },
+      display: "inline",
+      paddingLeft: 10
+    }
+  }),
+  { name: "MenuNested" }
+);
 
 export interface MenuNestedProps {
   activeItem: IActiveSubMenu;
diff --git a/src/components/AssignCategoryDialog/AssignCategoryDialog.tsx b/src/components/AssignCategoryDialog/AssignCategoryDialog.tsx
index 169c0ead7..8d66db15b 100644
--- a/src/components/AssignCategoryDialog/AssignCategoryDialog.tsx
+++ b/src/components/AssignCategoryDialog/AssignCategoryDialog.tsx
@@ -27,22 +27,25 @@ export interface FormData {
   query: string;
 }
 
-const useStyles = makeStyles({
-  avatar: {
-    "&:first-child": {
+const useStyles = makeStyles(
+  {
+    avatar: {
+      "&:first-child": {
+        paddingLeft: 0
+      }
+    },
+    checkboxCell: {
       paddingLeft: 0
+    },
+    overflow: {
+      overflowY: "visible"
+    },
+    wideCell: {
+      width: "100%"
     }
   },
-  checkboxCell: {
-    paddingLeft: 0
-  },
-  overflow: {
-    overflowY: "visible"
-  },
-  wideCell: {
-    width: "100%"
-  }
-});
+  { name: "AssignCategoryDialog" }
+);
 
 interface AssignCategoriesDialogProps {
   categories: SearchCategories_search_edges_node[];
diff --git a/src/components/AssignCollectionDialog/AssignCollectionDialog.tsx b/src/components/AssignCollectionDialog/AssignCollectionDialog.tsx
index c0491c3c3..48a24afcd 100644
--- a/src/components/AssignCollectionDialog/AssignCollectionDialog.tsx
+++ b/src/components/AssignCollectionDialog/AssignCollectionDialog.tsx
@@ -27,22 +27,25 @@ export interface FormData {
   query: string;
 }
 
-const useStyles = makeStyles({
-  avatar: {
-    "&:first-child": {
+const useStyles = makeStyles(
+  {
+    avatar: {
+      "&:first-child": {
+        paddingLeft: 0
+      }
+    },
+    checkboxCell: {
       paddingLeft: 0
+    },
+    overflow: {
+      overflowY: "visible"
+    },
+    wideCell: {
+      width: "100%"
     }
   },
-  checkboxCell: {
-    paddingLeft: 0
-  },
-  overflow: {
-    overflowY: "visible"
-  },
-  wideCell: {
-    width: "100%"
-  }
-});
+  { name: "AssignCollectionDialog" }
+);
 
 interface AssignCollectionDialogProps {
   collections: SearchCollections_search_edges_node[];
diff --git a/src/components/AssignProductDialog/AssignProductDialog.tsx b/src/components/AssignProductDialog/AssignProductDialog.tsx
index 82cff4fa8..3d1eadfba 100644
--- a/src/components/AssignProductDialog/AssignProductDialog.tsx
+++ b/src/components/AssignProductDialog/AssignProductDialog.tsx
@@ -29,26 +29,29 @@ export interface FormData {
   query: string;
 }
 
-const useStyles = makeStyles({
-  avatar: {
-    "&:first-child": {
+const useStyles = makeStyles(
+  {
+    avatar: {
+      "&:first-child": {
+        paddingLeft: 0
+      }
+    },
+    checkboxCell: {
       paddingLeft: 0
+    },
+    overflow: {
+      overflowY: "visible"
+    },
+    scrollArea: {
+      overflowY: "scroll"
+    },
+    wideCell: {
+      paddingLeft: 0,
+      width: "100%"
     }
   },
-  checkboxCell: {
-    paddingLeft: 0
-  },
-  overflow: {
-    overflowY: "visible"
-  },
-  scrollArea: {
-    overflowY: "scroll"
-  },
-  wideCell: {
-    paddingLeft: 0,
-    width: "100%"
-  }
-});
+  { name: "AssignProductDialog" }
+);
 
 export interface AssignProductDialogProps {
   confirmButtonState: ConfirmButtonTransitionState;
diff --git a/src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.tsx b/src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.tsx
index b7513124a..a3c2aa496 100644
--- a/src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.tsx
+++ b/src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.tsx
@@ -38,25 +38,28 @@ const DebounceAutocomplete: React.ComponentType<
   DebounceProps<string>
 > = Debounce;
 
-const useStyles = makeStyles(theme => ({
-  container: {
-    flexGrow: 1,
-    position: "relative"
-  },
-  menuBack: {
-    marginLeft: -theme.spacing(0.5),
-    marginRight: theme.spacing(1)
-  },
-  paper: {
-    left: 0,
-    marginTop: theme.spacing(),
-    padding: theme.spacing(),
-    position: "absolute",
-    right: 0,
-    zIndex: 2
-  },
-  root: {}
-}));
+const useStyles = makeStyles(
+  theme => ({
+    container: {
+      flexGrow: 1,
+      position: "relative"
+    },
+    menuBack: {
+      marginLeft: -theme.spacing(0.5),
+      marginRight: theme.spacing(1)
+    },
+    paper: {
+      left: 0,
+      marginTop: theme.spacing(),
+      padding: theme.spacing(),
+      position: "absolute",
+      right: 0,
+      zIndex: 2
+    },
+    root: {}
+  }),
+  { name: "AutocompleteSelectMenu" }
+);
 const AutocompleteSelectMenu: React.FC<AutocompleteSelectMenuProps> = props => {
   const {
     disabled,
diff --git a/src/components/CardMenu/CardMenu.tsx b/src/components/CardMenu/CardMenu.tsx
index 3de7e73be..aa88a61ac 100644
--- a/src/components/CardMenu/CardMenu.tsx
+++ b/src/components/CardMenu/CardMenu.tsx
@@ -18,15 +18,18 @@ export interface CardMenuProps {
   menuItems: CardMenuItem[];
 }
 
-const useStyles = makeStyles(theme => ({
-  iconButton: {
-    background: theme.palette.background.paper,
-    borderRadius: "100%",
-    height: 32,
-    padding: 0,
-    width: 32
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    iconButton: {
+      background: theme.palette.background.paper,
+      borderRadius: "100%",
+      height: 32,
+      padding: 0,
+      width: 32
+    }
+  }),
+  { name: "CardMenu" }
+);
 
 const CardMenu: React.FC<CardMenuProps> = props => {
   const { className, disabled, menuItems } = props;
diff --git a/src/components/CardSpacer.tsx b/src/components/CardSpacer.tsx
index 71ca51d55..9b084a10c 100644
--- a/src/components/CardSpacer.tsx
+++ b/src/components/CardSpacer.tsx
@@ -1,14 +1,17 @@
 import { makeStyles } from "@material-ui/core/styles";
 import React from "react";
 
-const useStyles = makeStyles(theme => ({
-  spacer: {
-    [theme.breakpoints.down("sm")]: {
-      marginTop: theme.spacing(1)
-    },
-    marginTop: theme.spacing(3)
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    spacer: {
+      [theme.breakpoints.down("sm")]: {
+        marginTop: theme.spacing(1)
+      },
+      marginTop: theme.spacing(3)
+    }
+  }),
+  { name: "CardSpacer" }
+);
 
 interface CardSpacerProps {
   children?: React.ReactNode;
diff --git a/src/components/CardTitle/CardTitle.tsx b/src/components/CardTitle/CardTitle.tsx
index ec72d2f55..15dd0f333 100644
--- a/src/components/CardTitle/CardTitle.tsx
+++ b/src/components/CardTitle/CardTitle.tsx
@@ -3,33 +3,36 @@ import Typography from "@material-ui/core/Typography";
 import classNames from "classnames";
 import React from "react";
 
-const useStyles = makeStyles(theme => ({
-  children: theme.mixins.gutters({}),
-  constantHeight: {
-    height: 56
-  },
-  hr: {
-    border: "none",
-    borderTop: `1px solid ${theme.palette.divider}`,
-    height: 0,
-    marginBottom: 0,
-    marginTop: 0,
-    width: "100%"
-  },
-  root: theme.mixins.gutters({
-    alignItems: "center",
-    display: "flex",
-    minHeight: 56
+const useStyles = makeStyles(
+  theme => ({
+    children: theme.mixins.gutters({}),
+    constantHeight: {
+      height: 56
+    },
+    hr: {
+      border: "none",
+      borderTop: `1px solid ${theme.palette.divider}`,
+      height: 0,
+      marginBottom: 0,
+      marginTop: 0,
+      width: "100%"
+    },
+    root: theme.mixins.gutters({
+      alignItems: "center",
+      display: "flex",
+      minHeight: 56
+    }),
+    title: {
+      flex: 1,
+      fontWeight: 500,
+      lineHeight: 1
+    },
+    toolbar: {
+      marginRight: -theme.spacing(1)
+    }
   }),
-  title: {
-    flex: 1,
-    fontWeight: 500,
-    lineHeight: 1
-  },
-  toolbar: {
-    marginRight: -theme.spacing(1)
-  }
-}));
+  { name: "CardTitle" }
+);
 
 interface CardTitleProps {
   children?: React.ReactNode;
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index 63eb4ff0f..529aef513 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -19,67 +19,70 @@ export type CheckboxProps = Omit<
   onChange?: (event: React.ChangeEvent<any>) => void;
 };
 
-const useStyles = makeStyles(theme => ({
-  box: {
-    "&$checked": {
-      "&:before": {
-        background: theme.palette.primary.main,
-        color: theme.palette.background.paper,
-        content: '"\\2713"',
-        fontWeight: "bold",
-        textAlign: "center"
+const useStyles = makeStyles(
+  theme => ({
+    box: {
+      "&$checked": {
+        "&:before": {
+          background: theme.palette.primary.main,
+          color: theme.palette.background.paper,
+          content: '"\\2713"',
+          fontWeight: "bold",
+          textAlign: "center"
+        },
+        borderColor: theme.palette.primary.main
       },
-      borderColor: theme.palette.primary.main
-    },
-    "&$disabled": {
-      borderColor: theme.palette.grey[200]
-    },
-    "&$indeterminate": {
-      "&:before": {
-        background: theme.palette.primary.main,
-        height: 2,
-        top: 5
+      "&$disabled": {
+        borderColor: theme.palette.grey[200]
       },
-      borderColor: theme.palette.primary.main
-    },
-    "&:before": {
-      background: "rgba(0, 0, 0, 0)",
-      content: '""',
+      "&$indeterminate": {
+        "&:before": {
+          background: theme.palette.primary.main,
+          height: 2,
+          top: 5
+        },
+        borderColor: theme.palette.primary.main
+      },
+      "&:before": {
+        background: "rgba(0, 0, 0, 0)",
+        content: '""',
+        height: 14,
+        left: -1,
+        position: "absolute",
+        top: -1,
+        transition: theme.transitions.duration.short + "ms",
+        width: 14
+      },
+
+      WebkitAppearance: "none",
+      border: `1px solid ${theme.palette.action.active}`,
+      boxSizing: "border-box",
+      cursor: "pointer",
       height: 14,
-      left: -1,
-      position: "absolute",
-      top: -1,
-      transition: theme.transitions.duration.short + "ms",
+      outline: "0",
+      position: "relative",
+      userSelect: "none",
       width: 14
     },
-
-    WebkitAppearance: "none",
-    border: `1px solid ${theme.palette.action.active}`,
-    boxSizing: "border-box",
-    cursor: "pointer",
-    height: 14,
-    outline: "0",
-    position: "relative",
-    userSelect: "none",
-    width: 14
-  },
-  checked: {},
-  disabled: {},
-  indeterminate: {},
-  root: {
-    "&:hover": {
-      background: fade(theme.palette.primary.main, 0.1)
-    },
-    alignSelf: "start",
-    borderRadius: "100%",
-    cursor: "pointer",
-    display: "flex",
-    height: 30,
-    justifyContent: "center",
-    margin: "5px 9px",
-    width: 30
-  }
-}));
+    checked: {},
+    disabled: {},
+    indeterminate: {},
+    root: {
+      "&:hover": {
+        background: fade(theme.palette.primary.main, 0.1)
+      },
+      alignSelf: "start",
+      borderRadius: "100%",
+      cursor: "pointer",
+      display: "flex",
+      height: 30,
+      justifyContent: "center",
+      margin: "5px 9px",
+      width: 30
+    }
+  }),
+  { name: "Checkbox" }
+);
 const Checkbox: React.FC<CheckboxProps> = props => {
   const {
     checked,
diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx
index db1456434..53a56bcdf 100644
--- a/src/components/Chip/Chip.tsx
+++ b/src/components/Chip/Chip.tsx
@@ -11,24 +11,27 @@ export interface ChipProps {
   onClose?: () => void;
 }
 
-const useStyles = makeStyles(theme => ({
-  closeIcon: {
-    cursor: "pointer",
-    fontSize: 16,
-    marginLeft: theme.spacing(),
-    verticalAlign: "middle"
-  },
-  label: {
-    color: theme.palette.common.white
-  },
-  root: {
-    background: fade(theme.palette.secondary.main, 0.8),
-    borderRadius: 8,
-    display: "inline-block",
-    marginRight: theme.spacing(2),
-    padding: "6px 12px"
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    closeIcon: {
+      cursor: "pointer",
+      fontSize: 16,
+      marginLeft: theme.spacing(),
+      verticalAlign: "middle"
+    },
+    label: {
+      color: theme.palette.common.white
+    },
+    root: {
+      background: fade(theme.palette.secondary.main, 0.8),
+      borderRadius: 8,
+      display: "inline-block",
+      marginRight: theme.spacing(2),
+      padding: "6px 12px"
+    }
+  }),
+  { name: "Chip" }
+);
 const Chip: React.FC<ChipProps> = props => {
   const { className, label, onClose } = props;
 
diff --git a/src/components/ColumnPicker/ColumnPickerContent.tsx b/src/components/ColumnPicker/ColumnPickerContent.tsx
index 7ea3e865f..26eada3f1 100644
--- a/src/components/ColumnPicker/ColumnPickerContent.tsx
+++ b/src/components/ColumnPicker/ColumnPickerContent.tsx
@@ -30,50 +30,53 @@ export interface ColumnPickerContentProps extends Partial<FetchMoreProps> {
   onSave: () => void;
 }
 
-const useStyles = makeStyles(theme => ({
-  actionBar: {
-    display: "flex",
-    justifyContent: "space-between"
-  },
-  actionBarContainer: {
-    boxShadow: `0px 0px 0px 0px ${theme.palette.background.paper}`,
-    transition: theme.transitions.duration.short + "ms"
-  },
-  cancelButton: {
-    marginRight: theme.spacing(2)
-  },
-  content: {
-    [theme.breakpoints.down("sm")]: {
-      gridTemplateColumns: "repeat(2, 1fr)"
+const useStyles = makeStyles(
+  theme => ({
+    actionBar: {
+      display: "flex",
+      justifyContent: "space-between"
     },
-    display: "grid",
-    gridColumnGap: theme.spacing(3),
-    gridTemplateColumns: "repeat(3, 1fr)",
-    maxHeight: 256,
-    overflowX: "visible",
-    overflowY: "scroll",
-    padding: theme.spacing(2, 3)
-  },
-  contentContainer: {
-    padding: 0
-  },
-  dropShadow: {
-    boxShadow: `0px -5px 10px 0px ${theme.palette.divider}`
-  },
-  loadMoreLoaderContainer: {
-    alignItems: "center",
-    display: "flex",
-    gridColumnEnd: "span 3",
-    height: theme.spacing(3),
-    justifyContent: "center"
-  },
-  root: {
-    boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)"
-  },
-  titleContainer: {
-    padding: theme.spacing(1.5, 3.5)
-  }
-}));
+    actionBarContainer: {
+      boxShadow: `0px 0px 0px 0px ${theme.palette.background.paper}`,
+      transition: theme.transitions.duration.short + "ms"
+    },
+    cancelButton: {
+      marginRight: theme.spacing(2)
+    },
+    content: {
+      [theme.breakpoints.down("sm")]: {
+        gridTemplateColumns: "repeat(2, 1fr)"
+      },
+      display: "grid",
+      gridColumnGap: theme.spacing(3),
+      gridTemplateColumns: "repeat(3, 1fr)",
+      maxHeight: 256,
+      overflowX: "visible",
+      overflowY: "scroll",
+      padding: theme.spacing(2, 3)
+    },
+    contentContainer: {
+      padding: 0
+    },
+    dropShadow: {
+      boxShadow: `0px -5px 10px 0px ${theme.palette.divider}`
+    },
+    loadMoreLoaderContainer: {
+      alignItems: "center",
+      display: "flex",
+      gridColumnEnd: "span 3",
+      height: theme.spacing(3),
+      justifyContent: "center"
+    },
+    root: {
+      boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)"
+    },
+    titleContainer: {
+      padding: theme.spacing(1.5, 3.5)
+    }
+  }),
+  { name: "ColumnPickerContent" }
+);
 
 const ColumnPickerContent: React.FC<ColumnPickerContentProps> = props => {
   const {
diff --git a/src/components/ConfirmButton/ConfirmButton.tsx b/src/components/ConfirmButton/ConfirmButton.tsx
index 6779eebb3..8a6d2f812 100644
--- a/src/components/ConfirmButton/ConfirmButton.tsx
+++ b/src/components/ConfirmButton/ConfirmButton.tsx
@@ -67,7 +67,7 @@ interface ConfirmButtonState {
   displayCompletedActionState: boolean;
 }
 
-const ConfirmButton = withStyles(styles)(
+const ConfirmButton = withStyles(styles, { name: "ConfirmButton" })(
   class ConfirmButtonComponent extends React.Component<
     ConfirmButtonProps &
       WithStyles<
diff --git a/src/components/ControlledSwitch.tsx b/src/components/ControlledSwitch.tsx
index 2254a485a..e7dea9c2a 100644
--- a/src/components/ControlledSwitch.tsx
+++ b/src/components/ControlledSwitch.tsx
@@ -3,14 +3,17 @@ import FormControlLabel from "@material-ui/core/FormControlLabel";
 import Switch from "@material-ui/core/Switch";
 import React from "react";
 
-const useStyles = makeStyles(theme => ({
-  label: {
-    marginLeft: theme.spacing(3.5)
-  },
-  labelText: {
-    fontSize: 14
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    label: {
+      marginLeft: theme.spacing(3.5)
+    },
+    labelText: {
+      fontSize: 14
+    }
+  }),
+  { name: "ControlledSwitch" }
+);
 
 interface ControlledSwitchProps {
   checked: boolean;
diff --git a/src/components/CountryList/CountryList.tsx b/src/components/CountryList/CountryList.tsx
index 61550e5f9..5db73c650 100644
--- a/src/components/CountryList/CountryList.tsx
+++ b/src/components/CountryList/CountryList.tsx
@@ -27,50 +27,53 @@ export interface CountryListProps {
   onCountryUnassign: (country: string) => void;
 }
 
-const useStyles = makeStyles(theme => ({
-  iconCell: {
-    "&:last-child": {
-      paddingRight: 0
+const useStyles = makeStyles(
+  theme => ({
+    iconCell: {
+      "&:last-child": {
+        paddingRight: 0
+      },
+      width: 48 + theme.spacing(2)
     },
-    width: 48 + theme.spacing(2)
-  },
-  indicator: {
-    color: theme.palette.text.disabled,
-    display: "inline-block",
-    left: 0,
-    marginRight: theme.spacing(0.5),
-    position: "absolute"
-  },
-  offsetCell: {
-    "&:first-child": {
-      paddingLeft: theme.spacing(3)
+    indicator: {
+      color: theme.palette.text.disabled,
+      display: "inline-block",
+      left: 0,
+      marginRight: theme.spacing(0.5),
+      position: "absolute"
     },
-    position: "relative"
-  },
-  pointer: {
-    cursor: "pointer"
-  },
-  root: {
-    "&:last-child": {
-      paddingBottom: 0
+    offsetCell: {
+      "&:first-child": {
+        paddingLeft: theme.spacing(3)
+      },
+      position: "relative"
     },
-    paddingTop: 0
-  },
-  rotate: {
-    transform: "rotate(180deg)"
-  },
-  textRight: {
-    textAlign: "right"
-  },
-  toLeft: {
-    "&:first-child": {
-      paddingLeft: 0
+    pointer: {
+      cursor: "pointer"
+    },
+    root: {
+      "&:last-child": {
+        paddingBottom: 0
+      },
+      paddingTop: 0
+    },
+    rotate: {
+      transform: "rotate(180deg)"
+    },
+    textRight: {
+      textAlign: "right"
+    },
+    toLeft: {
+      "&:first-child": {
+        paddingLeft: 0
+      }
+    },
+    wideColumn: {
+      width: "100%"
     }
-  },
-  wideColumn: {
-    width: "100%"
-  }
-}));
+  }),
+  { name: "CountryList" }
+);
 
 const CountryList: React.FC<CountryListProps> = props => {
   const {
diff --git a/src/components/EditableTableCell/EditableTableCell.tsx b/src/components/EditableTableCell/EditableTableCell.tsx
index b9acac21b..2e5ea0b33 100644
--- a/src/components/EditableTableCell/EditableTableCell.tsx
+++ b/src/components/EditableTableCell/EditableTableCell.tsx
@@ -9,35 +9,38 @@ import React from "react";
 
 import useForm from "@saleor/hooks/useForm";
 
-const useStyles = makeStyles(theme => ({
-  card: {
-    border: `1px solid ${theme.palette.divider}`
-  },
-  container: {
-    position: "relative"
-  },
-  overlay: {
-    cursor: "pointer",
-    height: "100vh",
-    left: 0,
-    position: "fixed",
-    top: 0,
-    width: "100vw",
-    zIndex: 1
-  },
-  root: {
-    left: 0,
-    minWidth: theme.spacing(20),
-    position: "absolute",
-    top: 0,
-    width: `calc(100% + ${theme.spacing(4)}px)`,
-    zIndex: 2
-  },
-  text: {
-    cursor: "pointer",
-    fontSize: "0.8125rem"
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    card: {
+      border: `1px solid ${theme.palette.divider}`
+    },
+    container: {
+      position: "relative"
+    },
+    overlay: {
+      cursor: "pointer",
+      height: "100vh",
+      left: 0,
+      position: "fixed",
+      top: 0,
+      width: "100vw",
+      zIndex: 1
+    },
+    root: {
+      left: 0,
+      minWidth: theme.spacing(20),
+      position: "absolute",
+      top: 0,
+      width: `calc(100% + ${theme.spacing(4)}px)`,
+      zIndex: 2
+    },
+    text: {
+      cursor: "pointer",
+      fontSize: "0.8125rem"
+    }
+  }),
+  { name: "EditableTableCell" }
+);
 
 interface EditableTableCellProps {
   className?: string;
diff --git a/src/components/ErrorPage/ErrorPage.tsx b/src/components/ErrorPage/ErrorPage.tsx
index 51810fb5f..5b2042567 100644
--- a/src/components/ErrorPage/ErrorPage.tsx
+++ b/src/components/ErrorPage/ErrorPage.tsx
@@ -11,49 +11,52 @@ export interface ErrorPageProps {
   onBack: () => void;
 }
 
-const useStyles = makeStyles(theme => ({
-  bottomHeader: {
-    fontWeight: 600 as 600,
-    textTransform: "uppercase"
-  },
-  button: {
-    marginTop: theme.spacing(2),
-    padding: 20
-  },
-  container: {
-    [theme.breakpoints.down("sm")]: {
-      gridTemplateColumns: "1fr",
-      padding: theme.spacing(3),
-      width: "100%"
+const useStyles = makeStyles(
+  theme => ({
+    bottomHeader: {
+      fontWeight: 600 as 600,
+      textTransform: "uppercase"
     },
-    display: "grid",
-    gridTemplateColumns: "1fr 487px",
-    margin: "0 auto",
-    width: 830
-  },
-  innerContainer: {
-    [theme.breakpoints.down("sm")]: {
-      order: 1,
-      textAlign: "center"
+    button: {
+      marginTop: theme.spacing(2),
+      padding: 20
     },
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center"
-  },
-  notFoundImage: {
-    "& svg": {
-      width: "100%"
+    container: {
+      [theme.breakpoints.down("sm")]: {
+        gridTemplateColumns: "1fr",
+        padding: theme.spacing(3),
+        width: "100%"
+      },
+      display: "grid",
+      gridTemplateColumns: "1fr 487px",
+      margin: "0 auto",
+      width: 830
+    },
+    innerContainer: {
+      [theme.breakpoints.down("sm")]: {
+        order: 1,
+        textAlign: "center"
+      },
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center"
+    },
+    notFoundImage: {
+      "& svg": {
+        width: "100%"
+      }
+    },
+    root: {
+      alignItems: "center",
+      display: "flex",
+      height: "calc(100vh - 180px)"
+    },
+    upperHeader: {
+      fontWeight: 600 as 600
     }
-  },
-  root: {
-    alignItems: "center",
-    display: "flex",
-    height: "calc(100vh - 180px)"
-  },
-  upperHeader: {
-    fontWeight: 600 as 600
-  }
-}));
+  }),
+  { name: "ErrorPage" }
+);
 
 const ErrorPage: React.FC<ErrorPageProps> = props => {
   const { onBack } = props;
diff --git a/src/components/ExternalLink/ExternalLink.tsx b/src/components/ExternalLink/ExternalLink.tsx
index d81d933ab..53cbe8480 100644
--- a/src/components/ExternalLink/ExternalLink.tsx
+++ b/src/components/ExternalLink/ExternalLink.tsx
@@ -2,11 +2,14 @@ import { makeStyles } from "@material-ui/core/styles";
 import Typography, { TypographyProps } from "@material-ui/core/Typography";
 import React from "react";
 
-const useStyles = makeStyles({
-  link: {
-    textDecoration: "none"
-  }
-});
+const useStyles = makeStyles(
+  {
+    link: {
+      textDecoration: "none"
+    }
+  },
+  { name: "ExternalLink" }
+);
 
 interface ExternalLinkProps extends React.HTMLProps<HTMLAnchorElement> {
   href: string;
diff --git a/src/components/FileUpload/FileUpload.tsx b/src/components/FileUpload/FileUpload.tsx
index a70681b38..0b403cbe0 100644
--- a/src/components/FileUpload/FileUpload.tsx
+++ b/src/components/FileUpload/FileUpload.tsx
@@ -4,17 +4,20 @@ import TextField from "@material-ui/core/TextField";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
-const useStyles = makeStyles({
-  fileUploadField: {
-    display: "none"
+const useStyles = makeStyles(
+  {
+    fileUploadField: {
+      display: "none"
+    },
+    root: {
+      display: "flex"
+    },
+    textField: {
+      flex: 1
+    }
   },
-  root: {
-    display: "flex"
-  },
-  textField: {
-    flex: 1
-  }
-});
+  { name: "FileUpload" }
+);
 
 interface FileUploadProps {
   disabled?: boolean;
diff --git a/src/components/Filter/Filter.tsx b/src/components/Filter/Filter.tsx
index 9d5d5e0d0..7b0774307 100644
--- a/src/components/Filter/Filter.tsx
+++ b/src/components/Filter/Filter.tsx
@@ -21,63 +21,66 @@ export interface FilterProps<TFilterKeys = string> {
   onFilterAdd: (filter: FilterContentSubmitData) => void;
 }
 
-const useStyles = makeStyles(theme => ({
-  addFilterButton: {
-    "&$filterButton": {
-      "&:hover, &:focus": {
-        backgroundColor: fade(theme.palette.primary.main, 0.1)
-      },
-      backgroundColor: theme.palette.background.paper,
-      border: `1px solid ${theme.palette.primary.main}`,
-      cursor: "pointer",
-      marginBottom: 0,
-      marginRight: theme.spacing(2),
-      marginTop: 0,
-      transition: theme.transitions.duration.short + "ms"
-    }
-  },
-  addFilterButtonActive: {
-    "&$addFilterButton": {
-      backgroundColor: fade(theme.palette.primary.main, 0.1)
-    }
-  },
-  addFilterIcon: {
-    transition: theme.transitions.duration.short + "ms"
-  },
-  addFilterText: {
-    color: theme.palette.primary.main,
-    fontSize: 14,
-    fontWeight: 600 as 600,
-    marginRight: 4,
-    textTransform: "uppercase"
-  },
-  filterButton: {
-    alignItems: "center",
-    backgroundColor: fade(theme.palette.primary.main, 0.6),
-    borderRadius: "4px",
-    display: "flex",
-    height: 40,
-    justifyContent: "space-around",
-    margin: theme.spacing(2, 1),
-    marginLeft: 0,
-    padding: theme.spacing(0, 2),
-    position: "relative"
-  },
-  paper: {
-    "& p": {
-      paddingBottom: 10
+const useStyles = makeStyles(
+  theme => ({
+    addFilterButton: {
+      "&$filterButton": {
+        "&:hover, &:focus": {
+          backgroundColor: fade(theme.palette.primary.main, 0.1)
+        },
+        backgroundColor: theme.palette.background.paper,
+        border: `1px solid ${theme.palette.primary.main}`,
+        cursor: "pointer",
+        marginBottom: 0,
+        marginRight: theme.spacing(2),
+        marginTop: 0,
+        transition: theme.transitions.duration.short + "ms"
+      }
     },
-    marginTop: theme.spacing(2),
-    padding: theme.spacing(2),
-    width: 240
-  },
-  popover: {
-    zIndex: 1
-  },
-  rotate: {
-    transform: "rotate(180deg)"
-  }
-}));
+    addFilterButtonActive: {
+      "&$addFilterButton": {
+        backgroundColor: fade(theme.palette.primary.main, 0.1)
+      }
+    },
+    addFilterIcon: {
+      transition: theme.transitions.duration.short + "ms"
+    },
+    addFilterText: {
+      color: theme.palette.primary.main,
+      fontSize: 14,
+      fontWeight: 600 as 600,
+      marginRight: 4,
+      textTransform: "uppercase"
+    },
+    filterButton: {
+      alignItems: "center",
+      backgroundColor: fade(theme.palette.primary.main, 0.6),
+      borderRadius: "4px",
+      display: "flex",
+      height: 40,
+      justifyContent: "space-around",
+      margin: theme.spacing(2, 1),
+      marginLeft: 0,
+      padding: theme.spacing(0, 2),
+      position: "relative"
+    },
+    paper: {
+      "& p": {
+        paddingBottom: 10
+      },
+      marginTop: theme.spacing(2),
+      padding: theme.spacing(2),
+      width: 240
+    },
+    popover: {
+      zIndex: 1
+    },
+    rotate: {
+      transform: "rotate(180deg)"
+    }
+  }),
+  { name: "Filter" }
+);
 const Filter: React.FC<FilterProps> = props => {
   const { currencySymbol, filterLabel, menu, onFilterAdd } = props;
   const classes = useStyles(props);
diff --git a/src/components/Filter/FilterActions.tsx b/src/components/Filter/FilterActions.tsx
index 3d5cdbcc7..60eee1d97 100644
--- a/src/components/Filter/FilterActions.tsx
+++ b/src/components/Filter/FilterActions.tsx
@@ -6,14 +6,17 @@ import React from "react";
 import { FilterContentSubmitData, IFilter } from "../Filter";
 import Filter from "./Filter";
 
-const useInputStyles = makeStyles({
-  input: {
-    padding: "10.5px 12px"
+const useInputStyles = makeStyles(
+  {
+    input: {
+      padding: "10.5px 12px"
+    },
+    root: {
+      flex: 1
+    }
   },
-  root: {
-    flex: 1
-  }
-});
+  { name: "FilterActions" }
+);
 
 const Search: React.FC<TextFieldProps> = props => {
   const classes = useInputStyles({});
diff --git a/src/components/Filter/FilterContent.tsx b/src/components/Filter/FilterContent.tsx
index 9fdbe14ee..08ec466cd 100644
--- a/src/components/Filter/FilterContent.tsx
+++ b/src/components/Filter/FilterContent.tsx
@@ -34,11 +34,14 @@ function getFilterChoices(items: IFilter<string>) {
   }));
 }
 
-const useStyles = makeStyles({
-  input: {
-    padding: "20px 12px 17px"
-  }
-});
+const useStyles = makeStyles(
+  {
+    input: {
+      padding: "20px 12px 17px"
+    }
+  },
+  { name: "FilterContent" }
+);
 
 const FilterContent: React.FC<FilterContentProps> = ({
   currencySymbol,
diff --git a/src/components/Filter/FilterElement.tsx b/src/components/Filter/FilterElement.tsx
index c04011e02..b5cb5c050 100644
--- a/src/components/Filter/FilterElement.tsx
+++ b/src/components/Filter/FilterElement.tsx
@@ -17,14 +17,17 @@ export interface FilterElementProps<TFilterKeys = string> {
   onChange: (value: string | string[]) => void;
 }
 
-const useStyles = makeStyles({
-  calendar: {
-    margin: 8
+const useStyles = makeStyles(
+  {
+    calendar: {
+      margin: 8
+    },
+    input: {
+      padding: "20px 12px 17px"
+    }
   },
-  input: {
-    padding: "20px 12px 17px"
-  }
-});
+  { name: "FilterElement" }
+);
 
 export interface FilterElementProps<TFilterKeys = string> {
   className?: string;
diff --git a/src/components/FormSpacer.tsx b/src/components/FormSpacer.tsx
index 5dc8cfb2c..b9027fdb3 100644
--- a/src/components/FormSpacer.tsx
+++ b/src/components/FormSpacer.tsx
@@ -1,11 +1,14 @@
 import { makeStyles } from "@material-ui/core/styles";
 import React from "react";
 
-const useStyles = makeStyles(theme => ({
-  spacer: {
-    marginTop: theme.spacing(3)
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    spacer: {
+      marginTop: theme.spacing(3)
+    }
+  }),
+  { name: "FormSpacer" }
+);
 
 interface FormSpacerProps {
   children?: React.ReactNode;
diff --git a/src/components/Grid/Grid.tsx b/src/components/Grid/Grid.tsx
index 2d90dd9fa..aec58f63a 100644
--- a/src/components/Grid/Grid.tsx
+++ b/src/components/Grid/Grid.tsx
@@ -9,26 +9,29 @@ export interface GridProps {
   variant?: GridVariant;
 }
 
-const useStyles = makeStyles(theme => ({
-  default: {
-    gridTemplateColumns: "9fr 4fr"
-  },
-  inverted: {
-    gridTemplateColumns: "4fr 9fr"
-  },
-  root: {
-    display: "grid",
-    gridColumnGap: theme.spacing(3),
-    gridRowGap: theme.spacing(3),
-    [theme.breakpoints.down("sm")]: {
-      gridRowGap: theme.spacing(1),
-      gridTemplateColumns: "1fr"
+const useStyles = makeStyles(
+  theme => ({
+    default: {
+      gridTemplateColumns: "9fr 4fr"
+    },
+    inverted: {
+      gridTemplateColumns: "4fr 9fr"
+    },
+    root: {
+      display: "grid",
+      gridColumnGap: theme.spacing(3),
+      gridRowGap: theme.spacing(3),
+      [theme.breakpoints.down("sm")]: {
+        gridRowGap: theme.spacing(1),
+        gridTemplateColumns: "1fr"
+      }
+    },
+    uniform: {
+      gridTemplateColumns: "1fr 1fr"
     }
-  },
-  uniform: {
-    gridTemplateColumns: "1fr 1fr"
-  }
-}));
+  }),
+  { name: "Grid" }
+);
 
 export const Grid: React.FC<GridProps> = props => {
   const { className, children, variant } = props;
diff --git a/src/components/Hr.tsx b/src/components/Hr.tsx
index edc39e5bc..f873a7f5f 100644
--- a/src/components/Hr.tsx
+++ b/src/components/Hr.tsx
@@ -6,16 +6,19 @@ interface HrProps {
   className?: string;
 }
 
-const useStyles = makeStyles(theme => ({
-  root: {
-    backgroundColor: theme.palette.divider,
-    border: "none",
-    display: "block",
-    height: 1,
-    margin: 0,
-    width: "100%"
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    root: {
+      backgroundColor: theme.palette.divider,
+      border: "none",
+      display: "block",
+      height: 1,
+      margin: 0,
+      width: "100%"
+    }
+  }),
+  { name: "Hr" }
+);
 
 export const Hr: React.FC<HrProps> = props => {
   const { className } = props;
diff --git a/src/components/IconButtonTableCell/IconButtonTableCell.tsx b/src/components/IconButtonTableCell/IconButtonTableCell.tsx
index a8f58bd02..46d9070a2 100644
--- a/src/components/IconButtonTableCell/IconButtonTableCell.tsx
+++ b/src/components/IconButtonTableCell/IconButtonTableCell.tsx
@@ -12,15 +12,18 @@ export interface IconButtonTableCellProps {
   onClick: () => void;
 }
 
-const useStyles = makeStyles(theme => ({
-  root: {
-    "&:last-child": {
-      paddingRight: 0
-    },
-    paddingRight: 0,
-    width: ICONBUTTON_SIZE + theme.spacing(0.5)
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    root: {
+      "&:last-child": {
+        paddingRight: 0
+      },
+      paddingRight: 0,
+      width: ICONBUTTON_SIZE + theme.spacing(0.5)
+    }
+  }),
+  { name: "IconButtonTableCell" }
+);
 const IconButtonTableCell: React.FC<IconButtonTableCellProps> = props => {
   const {
     children,
diff --git a/src/components/ImageTile/ImageTile.tsx b/src/components/ImageTile/ImageTile.tsx
index 5d9312f22..dcd20a2f4 100644
--- a/src/components/ImageTile/ImageTile.tsx
+++ b/src/components/ImageTile/ImageTile.tsx
@@ -6,50 +6,53 @@ import EditIcon from "@material-ui/icons/Edit";
 import classNames from "classnames";
 import React from "react";
 
-const useStyles = makeStyles(theme => ({
-  image: {
-    height: "100%",
-    objectFit: "contain",
-    userSelect: "none",
-    width: "100%"
-  },
-  imageContainer: {
-    "&:hover, &.dragged": {
-      "& $imageOverlay": {
-        display: "block"
+const useStyles = makeStyles(
+  theme => ({
+    image: {
+      height: "100%",
+      objectFit: "contain",
+      userSelect: "none",
+      width: "100%"
+    },
+    imageContainer: {
+      "&:hover, &.dragged": {
+        "& $imageOverlay": {
+          display: "block"
+        }
+      },
+      background: theme.palette.background.paper,
+      border: `1px solid ${theme.palette.divider}`,
+      borderRadius: theme.spacing(),
+      height: 148,
+      overflow: "hidden",
+      padding: theme.spacing(2),
+      position: "relative",
+      width: 148
+    },
+    imageOverlay: {
+      background: "rgba(0, 0, 0, 0.6)",
+      cursor: "move",
+      display: "none",
+      height: 148,
+      left: 0,
+      position: "absolute",
+      top: 0,
+      width: 148
+    },
+    imageOverlayShow: {
+      "&$imageOverlay": {
+        alignItems: "center",
+        display: "flex",
+        justifyContent: "center"
       }
     },
-    background: theme.palette.background.paper,
-    border: `1px solid ${theme.palette.divider}`,
-    borderRadius: theme.spacing(),
-    height: 148,
-    overflow: "hidden",
-    padding: theme.spacing(2),
-    position: "relative",
-    width: 148
-  },
-  imageOverlay: {
-    background: "rgba(0, 0, 0, 0.6)",
-    cursor: "move",
-    display: "none",
-    height: 148,
-    left: 0,
-    position: "absolute",
-    top: 0,
-    width: 148
-  },
-  imageOverlayShow: {
-    "&$imageOverlay": {
-      alignItems: "center",
+    imageOverlayToolbar: {
       display: "flex",
-      justifyContent: "center"
+      justifyContent: "flex-end"
     }
-  },
-  imageOverlayToolbar: {
-    display: "flex",
-    justifyContent: "flex-end"
-  }
-}));
+  }),
+  { name: "ImageTile" }
+);
 
 interface ImageTileProps {
   image: {
diff --git a/src/components/ImageUpload/ImageUpload.tsx b/src/components/ImageUpload/ImageUpload.tsx
index 070ecc974..745067320 100644
--- a/src/components/ImageUpload/ImageUpload.tsx
+++ b/src/components/ImageUpload/ImageUpload.tsx
@@ -17,42 +17,45 @@ interface ImageUploadProps {
   onImageUpload: (file: FileList) => void;
 }
 
-const useStyles = makeStyles(theme => ({
-  backdrop: {
-    background: fade(theme.palette.primary.main, 0.1),
-    color: theme.palette.primary.main
-  },
-  fileField: {
-    display: "none"
-  },
-  imageContainer: {
-    background: "#ffffff",
-    border: "1px solid #eaeaea",
-    borderRadius: theme.spacing(),
-    height: 148,
-    justifySelf: "start",
-    overflow: "hidden",
-    padding: theme.spacing(2),
-    position: "relative",
-    transition: theme.transitions.duration.standard + "s",
-    width: 148
-  },
-  photosIcon: {
-    height: "64px",
-    margin: "0 auto",
-    width: "64px"
-  },
-  photosIconContainer: {
-    padding: theme.spacing(5, 0),
-    textAlign: "center"
-  },
-  uploadText: {
-    color: theme.typography.body1.color,
-    fontSize: 12,
-    fontWeight: 600,
-    textTransform: "uppercase"
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    backdrop: {
+      background: fade(theme.palette.primary.main, 0.1),
+      color: theme.palette.primary.main
+    },
+    fileField: {
+      display: "none"
+    },
+    imageContainer: {
+      background: "#ffffff",
+      border: "1px solid #eaeaea",
+      borderRadius: theme.spacing(),
+      height: 148,
+      justifySelf: "start",
+      overflow: "hidden",
+      padding: theme.spacing(2),
+      position: "relative",
+      transition: theme.transitions.duration.standard + "s",
+      width: 148
+    },
+    photosIcon: {
+      height: "64px",
+      margin: "0 auto",
+      width: "64px"
+    },
+    photosIconContainer: {
+      padding: theme.spacing(5, 0),
+      textAlign: "center"
+    },
+    uploadText: {
+      color: theme.typography.body1.color,
+      fontSize: 12,
+      fontWeight: 600,
+      textTransform: "uppercase"
+    }
+  }),
+  { name: "ImageUpload" }
+);
 
 export const ImageUpload: React.FC<ImageUploadProps> = props => {
   const {
diff --git a/src/components/LanguageSwitch/LanguageSwitch.tsx b/src/components/LanguageSwitch/LanguageSwitch.tsx
index d5235f703..fe512b4d0 100644
--- a/src/components/LanguageSwitch/LanguageSwitch.tsx
+++ b/src/components/LanguageSwitch/LanguageSwitch.tsx
@@ -21,36 +21,39 @@ export interface LanguageSwitchProps {
   onLanguageChange: (lang: LanguageCodeEnum) => void;
 }
 
-const useStyles = makeStyles(theme => ({
-  arrow: {
-    color: theme.palette.primary.main,
-    transition: theme.transitions.duration.standard + "ms"
-  },
-  container: {
-    paddingBottom: theme.spacing(1)
-  },
-  menuContainer: {
-    cursor: "pointer",
-    display: "flex",
-    justifyContent: "space-between",
-    minWidth: 90,
-    padding: theme.spacing(),
-    position: "relative"
-  },
-  menuItem: {
-    textAlign: "justify"
-  },
-  menuPaper: {
-    maxHeight: `calc(100vh - ${theme.spacing(2)}px)`,
-    overflow: "scroll"
-  },
-  popover: {
-    zIndex: 1
-  },
-  rotate: {
-    transform: "rotate(180deg)"
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    arrow: {
+      color: theme.palette.primary.main,
+      transition: theme.transitions.duration.standard + "ms"
+    },
+    container: {
+      paddingBottom: theme.spacing(1)
+    },
+    menuContainer: {
+      cursor: "pointer",
+      display: "flex",
+      justifyContent: "space-between",
+      minWidth: 90,
+      padding: theme.spacing(),
+      position: "relative"
+    },
+    menuItem: {
+      textAlign: "justify"
+    },
+    menuPaper: {
+      maxHeight: `calc(100vh - ${theme.spacing(2)}px)`,
+      overflow: "scroll"
+    },
+    popover: {
+      zIndex: 1
+    },
+    rotate: {
+      transform: "rotate(180deg)"
+    }
+  }),
+  { name: "LanguageSwitch" }
+);
 const LanguageSwitch: React.FC<LanguageSwitchProps> = props => {
   const { currentLanguage, languages, onLanguageChange } = props;
   const classes = useStyles(props);
diff --git a/src/components/Link.tsx b/src/components/Link.tsx
index 996f78a94..3086f1bc5 100644
--- a/src/components/Link.tsx
+++ b/src/components/Link.tsx
@@ -3,21 +3,24 @@ import Typography, { TypographyProps } from "@material-ui/core/Typography";
 import classNames from "classnames";
 import React from "react";
 
-const useStyles = makeStyles(theme => ({
-  primary: {
-    color: theme.palette.primary.main
-  },
-  root: {
-    cursor: "pointer",
-    display: "inline"
-  },
-  secondary: {
-    color: theme.palette.primary.main
-  },
-  underline: {
-    textDecoration: "underline"
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    primary: {
+      color: theme.palette.primary.main
+    },
+    root: {
+      cursor: "pointer",
+      display: "inline"
+    },
+    secondary: {
+      color: theme.palette.primary.main
+    },
+    underline: {
+      textDecoration: "underline"
+    }
+  }),
+  { name: "Link" }
+);
 
 interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   color?: "primary" | "secondary";
diff --git a/src/components/ListField/ListField.tsx b/src/components/ListField/ListField.tsx
index a1265c3d1..efd6a3d1f 100644
--- a/src/components/ListField/ListField.tsx
+++ b/src/components/ListField/ListField.tsx
@@ -36,7 +36,7 @@ interface ListFieldProps
   }>;
 }
 
-const ListField = withStyles(styles)(
+const ListField = withStyles(styles, { name: "ListField" })(
   class ListFieldComponent extends React.Component<
     ListFieldProps,
     ListFieldState
diff --git a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx
index eee7f7831..61aabf8ba 100644
--- a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx
+++ b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx
@@ -15,42 +15,45 @@ import MultiAutocompleteSelectFieldContent, {
   MultiAutocompleteChoiceType
 } from "./MultiAutocompleteSelectFieldContent";
 
-const useStyles = makeStyles(theme => ({
-  chip: {
-    width: "100%"
-  },
-  chipClose: {
-    height: 32,
-    padding: 0,
-    width: 32
-  },
-  chipContainer: {
-    display: "flex",
-    flexDirection: "column",
-    marginTop: theme.spacing(1)
-  },
-  chipInner: {
-    "& svg": {
+const useStyles = makeStyles(
+  theme => ({
+    chip: {
+      width: "100%"
+    },
+    chipClose: {
+      height: 32,
+      padding: 0,
+      width: 32
+    },
+    chipContainer: {
+      display: "flex",
+      flexDirection: "column",
+      marginTop: theme.spacing(1)
+    },
+    chipInner: {
+      "& svg": {
+        color: theme.palette.primary.contrastText
+      },
+      alignItems: "center",
+      background: fade(theme.palette.primary.main, 0.8),
+      borderRadius: 18,
+      color: theme.palette.primary.contrastText,
+      display: "flex",
+      justifyContent: "space-between",
+      margin: theme.spacing(1, 0),
+      paddingLeft: theme.spacing(2),
+      paddingRight: theme.spacing(1)
+    },
+    chipLabel: {
       color: theme.palette.primary.contrastText
     },
-    alignItems: "center",
-    background: fade(theme.palette.primary.main, 0.8),
-    borderRadius: 18,
-    color: theme.palette.primary.contrastText,
-    display: "flex",
-    justifyContent: "space-between",
-    margin: theme.spacing(1, 0),
-    paddingLeft: theme.spacing(2),
-    paddingRight: theme.spacing(1)
-  },
-  chipLabel: {
-    color: theme.palette.primary.contrastText
-  },
-  container: {
-    flexGrow: 1,
-    position: "relative"
-  }
-}));
+    container: {
+      flexGrow: 1,
+      position: "relative"
+    }
+  }),
+  { name: "MultiAutocompleteSelectField" }
+);
 
 export interface MultiAutocompleteSelectFieldProps
   extends Partial<FetchMoreProps> {
diff --git a/src/components/MultiSelectField/MultiSelectField.tsx b/src/components/MultiSelectField/MultiSelectField.tsx
index 4cc592a08..6548ff0b9 100644
--- a/src/components/MultiSelectField/MultiSelectField.tsx
+++ b/src/components/MultiSelectField/MultiSelectField.tsx
@@ -10,20 +10,23 @@ import { FormattedMessage } from "react-intl";
 
 import Checkbox from "../Checkbox";
 
-const useStyles = makeStyles(theme => ({
-  checkbox: {
-    marginRight: -theme.spacing(2)
-  },
-  formControl: {
-    width: "100%"
-  },
-  menuItem: {
-    alignItems: "center",
-    display: "flex",
-    justifyContent: "space-between",
-    width: "100%"
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    checkbox: {
+      marginRight: -theme.spacing(2)
+    },
+    formControl: {
+      width: "100%"
+    },
+    menuItem: {
+      alignItems: "center",
+      display: "flex",
+      justifyContent: "space-between",
+      width: "100%"
+    }
+  }),
+  { name: "MultiSelectField" }
+);
 
 interface MultiSelectFieldProps {
   choices: Array<{
diff --git a/src/components/NotFoundPage/NotFoundPage.tsx b/src/components/NotFoundPage/NotFoundPage.tsx
index a71160355..ad36ceaab 100644
--- a/src/components/NotFoundPage/NotFoundPage.tsx
+++ b/src/components/NotFoundPage/NotFoundPage.tsx
@@ -7,45 +7,48 @@ import { FormattedMessage } from "react-intl";
 
 import notFoundImage from "@assets/images/not-found-404.svg";
 
-const useStyles = makeStyles(theme => ({
-  button: {
-    marginTop: theme.spacing(2),
-    padding: 20
-  },
-  container: {
-    [theme.breakpoints.down("sm")]: {
-      gridTemplateColumns: "1fr",
-      padding: theme.spacing(3),
-      width: "100%"
+const useStyles = makeStyles(
+  theme => ({
+    button: {
+      marginTop: theme.spacing(2),
+      padding: 20
     },
-    display: "grid",
-    gridTemplateColumns: "1fr 487px",
-    margin: "0 auto",
-    width: 830
-  },
-  header: {
-    fontWeight: 600 as 600
-  },
-  innerContainer: {
-    [theme.breakpoints.down("sm")]: {
-      order: 1,
-      textAlign: "center"
+    container: {
+      [theme.breakpoints.down("sm")]: {
+        gridTemplateColumns: "1fr",
+        padding: theme.spacing(3),
+        width: "100%"
+      },
+      display: "grid",
+      gridTemplateColumns: "1fr 487px",
+      margin: "0 auto",
+      width: 830
     },
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center"
-  },
-  notFoundImage: {
-    "& svg": {
-      width: "100%"
+    header: {
+      fontWeight: 600 as 600
+    },
+    innerContainer: {
+      [theme.breakpoints.down("sm")]: {
+        order: 1,
+        textAlign: "center"
+      },
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center"
+    },
+    notFoundImage: {
+      "& svg": {
+        width: "100%"
+      }
+    },
+    root: {
+      alignItems: "center",
+      display: "flex",
+      height: "calc(100vh - 180px)"
     }
-  },
-  root: {
-    alignItems: "center",
-    display: "flex",
-    height: "calc(100vh - 180px)"
-  }
-}));
+  }),
+  { name: "NotFoundPage" }
+);
 
 interface NotFoundPageProps {
   onBack: () => void;
diff --git a/src/components/PageHeader/PageHeader.tsx b/src/components/PageHeader/PageHeader.tsx
index d1457663b..580386798 100644
--- a/src/components/PageHeader/PageHeader.tsx
+++ b/src/components/PageHeader/PageHeader.tsx
@@ -5,21 +5,24 @@ import React from "react";
 import ExtendedPageHeader from "../ExtendedPageHeader";
 import Skeleton from "../Skeleton";
 
-const useStyles = makeStyles(theme => ({
-  root: {
-    display: "flex"
-  },
-  title: {
-    [theme.breakpoints.down("sm")]: {
-      fontSize: 20,
-      marginTop: theme.spacing(2),
-      padding: 0
+const useStyles = makeStyles(
+  theme => ({
+    root: {
+      display: "flex"
     },
-    alignSelf: "flex-start",
-    flex: 1,
-    fontSize: 24
-  }
-}));
+    title: {
+      [theme.breakpoints.down("sm")]: {
+        fontSize: 20,
+        marginTop: theme.spacing(2),
+        padding: 0
+      },
+      alignSelf: "flex-start",
+      flex: 1,
+      fontSize: 24
+    }
+  }),
+  { name: "PageHeader" }
+);
 
 interface PageHeaderProps {
   children?: React.ReactNode;
diff --git a/src/components/PhoneField/PhoneField.tsx b/src/components/PhoneField/PhoneField.tsx
index 53d963aad..d6a1567c9 100644
--- a/src/components/PhoneField/PhoneField.tsx
+++ b/src/components/PhoneField/PhoneField.tsx
@@ -4,13 +4,16 @@ import React from "react";
 
 import SingleSelectField from "@saleor/components/SingleSelectField";
 
-const useStyles = makeStyles(theme => ({
-  root: {
-    display: "grid",
-    gridColumnGap: theme.spacing(2),
-    gridTemplateColumns: "5rem 1fr"
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    root: {
+      display: "grid",
+      gridColumnGap: theme.spacing(2),
+      gridTemplateColumns: "5rem 1fr"
+    }
+  }),
+  { name: "PhoneField" }
+);
 
 interface PhoneFieldProps {
   name: string;
diff --git a/src/components/PriceField/PriceField.tsx b/src/components/PriceField/PriceField.tsx
index 7fe765662..d924a6441 100644
--- a/src/components/PriceField/PriceField.tsx
+++ b/src/components/PriceField/PriceField.tsx
@@ -4,26 +4,29 @@ import { makeStyles } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import React from "react";
 
-const useStyles = makeStyles(theme => ({
-  currencySymbol: {
-    fontSize: "0.875rem"
-  },
-  inputContainer: {
-    display: "grid",
-    gridTemplateColumns: "1fr 2rem 1fr"
-  },
-  pullDown: {
-    marginTop: theme.spacing(2)
-  },
-  separator: {
-    marginTop: theme.spacing(3),
-    textAlign: "center",
-    width: "100%"
-  },
-  widgetContainer: {
-    marginTop: theme.spacing(2)
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    currencySymbol: {
+      fontSize: "0.875rem"
+    },
+    inputContainer: {
+      display: "grid",
+      gridTemplateColumns: "1fr 2rem 1fr"
+    },
+    pullDown: {
+      marginTop: theme.spacing(2)
+    },
+    separator: {
+      marginTop: theme.spacing(3),
+      textAlign: "center",
+      width: "100%"
+    },
+    widgetContainer: {
+      marginTop: theme.spacing(2)
+    }
+  }),
+  { name: "PriceField" }
+);
 
 interface PriceFieldProps {
   className?: string;
diff --git a/src/components/RadioSwitchField/RadioSwitchField.tsx b/src/components/RadioSwitchField/RadioSwitchField.tsx
index 0c715f729..b0bf20725 100644
--- a/src/components/RadioSwitchField/RadioSwitchField.tsx
+++ b/src/components/RadioSwitchField/RadioSwitchField.tsx
@@ -6,25 +6,28 @@ import { makeStyles } from "@material-ui/core/styles";
 import classNames from "classnames";
 import React from "react";
 
-const useStyles = makeStyles({
-  formControl: {
-    padding: 0,
-    width: "100%"
-  },
-  formLabel: {
-    marginLeft: "-5px",
-    paddingBottom: "10px"
-  },
-  radioLabel: {
-    "& > span": {
-      padding: "10px 6px"
+const useStyles = makeStyles(
+  {
+    formControl: {
+      padding: 0,
+      width: "100%"
+    },
+    formLabel: {
+      marginLeft: "-5px",
+      paddingBottom: "10px"
+    },
+    radioLabel: {
+      "& > span": {
+        padding: "10px 6px"
+      }
+    },
+    secondLabel: {
+      display: "block",
+      fontSize: "12px"
     }
   },
-  secondLabel: {
-    display: "block",
-    fontSize: "12px"
-  }
-});
+  { name: "RadioSwitchField" }
+);
 
 interface RadioSwitchFieldProps {
   className?: string;
diff --git a/src/components/RichTextEditor/ImageEntity.tsx b/src/components/RichTextEditor/ImageEntity.tsx
index 4f6787ad9..2bc502f3f 100644
--- a/src/components/RichTextEditor/ImageEntity.tsx
+++ b/src/components/RichTextEditor/ImageEntity.tsx
@@ -18,25 +18,28 @@ interface ImageEntityProps {
   onRemove: (entityKey: string) => void;
 }
 
-const useStyles = makeStyles(theme => ({
-  anchor: {
-    display: "inline-block"
-  },
-  container: {
-    alignItems: "center",
-    display: "flex"
-  },
-  image: { maxWidth: "100%" },
-  inline: {
-    display: "inline-block"
-  },
-  root: {
-    alignItems: "center",
-    display: "flex",
-    minHeight: 72,
-    padding: theme.spacing(1.5)
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    anchor: {
+      display: "inline-block"
+    },
+    container: {
+      alignItems: "center",
+      display: "flex"
+    },
+    image: { maxWidth: "100%" },
+    inline: {
+      display: "inline-block"
+    },
+    root: {
+      alignItems: "center",
+      display: "flex",
+      minHeight: 72,
+      padding: theme.spacing(1.5)
+    }
+  }),
+  { name: "ImageEntity" }
+);
 
 const ImageEntity: React.FC<ImageEntityProps> = props => {
   const { contentState, entityKey, onEdit, onRemove } = props;
diff --git a/src/components/RichTextEditor/LinkEntity.tsx b/src/components/RichTextEditor/LinkEntity.tsx
index 29c38a808..5a12f0195 100644
--- a/src/components/RichTextEditor/LinkEntity.tsx
+++ b/src/components/RichTextEditor/LinkEntity.tsx
@@ -22,35 +22,38 @@ interface LinkEntityProps {
   onRemove: (entityKey: string) => void;
 }
 
-const useStyles = makeStyles(theme => ({
-  anchor: {
-    display: "inline-block"
-  },
-  container: {
-    alignItems: "center",
-    display: "flex"
-  },
-  inline: {
-    display: "inline-block"
-  },
-  popover: {
-    zIndex: 1
-  },
-  root: {
-    alignItems: "center",
-    display: "flex",
-    minHeight: 72,
-    padding: theme.spacing(1.5, 1.5, 1.5, 3)
-  },
-  separator: {
-    backgroundColor: theme.palette.grey[300],
-    display: "inline-block",
-    height: 30,
-    marginLeft: theme.spacing(2),
-    marginRight: theme.spacing(),
-    width: 1
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    anchor: {
+      display: "inline-block"
+    },
+    container: {
+      alignItems: "center",
+      display: "flex"
+    },
+    inline: {
+      display: "inline-block"
+    },
+    popover: {
+      zIndex: 1
+    },
+    root: {
+      alignItems: "center",
+      display: "flex",
+      minHeight: 72,
+      padding: theme.spacing(1.5, 1.5, 1.5, 3)
+    },
+    separator: {
+      backgroundColor: theme.palette.grey[300],
+      display: "inline-block",
+      height: 30,
+      marginLeft: theme.spacing(2),
+      marginRight: theme.spacing(),
+      width: 1
+    }
+  }),
+  { name: "LinkEntity" }
+);
 
 const LinkEntity: React.FC<LinkEntityProps> = props => {
   const { children, contentState, entityKey, onEdit, onRemove } = props;
diff --git a/src/components/RichTextEditor/RichTextEditor.tsx b/src/components/RichTextEditor/RichTextEditor.tsx
index c0be198d1..8afa638c1 100644
--- a/src/components/RichTextEditor/RichTextEditor.tsx
+++ b/src/components/RichTextEditor/RichTextEditor.tsx
@@ -37,158 +37,161 @@ export interface RichTextEditorProps {
   onChange: (event: React.ChangeEvent<any>) => void;
 }
 
-const useStyles = makeStyles(theme => ({
-  error: {
-    color: theme.palette.error.main
-  },
-  helperText: {
-    marginTop: theme.spacing(0.75)
-  },
-  input: {
-    position: "relative"
-  },
-  label: {
-    fontSize: theme.typography.caption.fontSize,
-    left: 12,
-    position: "absolute",
-    top: 9
-  },
-  linkIcon: {
-    marginTop: 2
-  },
-  root: {
-    "& .DraftEditor": {
-      "&-editorContainer": {
-        "& .public-DraftEditor-content": {
-          lineHeight: 1.62
-        },
-        "& a": {
-          color: theme.palette.primary.light
-        },
-        "&:after": {
-          background: theme.palette.getContrastText(
-            theme.palette.background.default
-          ),
-          bottom: -11,
-          content: "''",
-          display: "block",
-          height: 2,
-          left: -12,
-          position: "absolute",
-          transform: "scaleX(0) scaleY(0)",
-          width: "calc(100% + 24px)"
-        },
-        position: "relative"
-      },
-      "&-root": {
-        ...theme.typography.body1
-      }
+const useStyles = makeStyles(
+  theme => ({
+    error: {
+      color: theme.palette.error.main
     },
-    "& .Draftail": {
-      "&-Editor": {
-        "&--focus": {
-          boxShadow: `inset 0px 0px 0px 2px ${theme.palette.primary.main}`
+    helperText: {
+      marginTop: theme.spacing(0.75)
+    },
+    input: {
+      position: "relative"
+    },
+    label: {
+      fontSize: theme.typography.caption.fontSize,
+      left: 12,
+      position: "absolute",
+      top: 9
+    },
+    linkIcon: {
+      marginTop: 2
+    },
+    root: {
+      "& .DraftEditor": {
+        "&-editorContainer": {
+          "& .public-DraftEditor-content": {
+            lineHeight: 1.62
+          },
+          "& a": {
+            color: theme.palette.primary.light
+          },
+          "&:after": {
+            background: theme.palette.getContrastText(
+              theme.palette.background.default
+            ),
+            bottom: -11,
+            content: "''",
+            display: "block",
+            height: 2,
+            left: -12,
+            position: "absolute",
+            transform: "scaleX(0) scaleY(0)",
+            width: "calc(100% + 24px)"
+          },
+          position: "relative"
         },
-        "&:hover": {
-          borderColor: theme.palette.primary.main
-        },
-        border: `1px ${theme.palette.divider} solid`,
-        borderRadius: 4,
-        padding: "27px 12px 10px",
-        position: "relative",
-        transition: theme.transitions.duration.shortest + "ms"
-      },
-      "&-Toolbar": {
-        "&Button": {
-          "& svg": {
-            padding: 2
-          },
-          "&--active": {
-            "&:hover": {
-              background: theme.palette.primary.main
-            },
-            "&:not(:hover)": {
-              borderRightColor: theme.palette.primary.main
-            },
-            background: theme.palette.primary.main
-          },
-          "&:focus": {
-            "&:active": {
-              "&:after": {
-                background: fade(theme.palette.primary.main, 0.3),
-                borderRadius: "100%",
-                content: "''",
-                display: "block",
-                height: "100%",
-                width: "100%"
-              }
-            }
-          },
-          "&:hover": {
-            background: fade(theme.palette.primary.main, 0.3)
-          },
-          alignItems: "center",
-          background: "none",
-          border: "none",
-          borderRight: `1px ${theme.palette.divider} solid`,
-          color: theme.typography.body1.color,
-          cursor: "pointer",
-          display: "inline-flex",
-          height: 36,
-          justifyContent: "center",
-          padding: theme.spacing(1) + 2,
-          transition: theme.transitions.duration.short + "ms",
-          width: 36
-        },
-        "&Group": {
-          "&:last-of-type": {
-            "& .Draftail-ToolbarButton": {
-              "&:last-of-type": {
-                border: "none"
-              }
-            }
-          },
-          display: "flex"
-        },
-        background: theme.palette.background.default,
-        border: `1px ${theme.palette.divider} solid`,
-        display: "inline-flex",
-        flexWrap: "wrap",
-        marginBottom: theme.spacing(),
-        marginTop: 10,
-        [theme.breakpoints.down(460)]: {
-          width: "min-content"
+        "&-root": {
+          ...theme.typography.body1
         }
       },
-      "&-block": {
-        "&--blockquote": {
-          borderLeft: `2px solid ${theme.palette.divider}`,
-          margin: 0,
-          padding: theme.spacing(1, 2)
-        }
-      }
-    },
-    "&$error": {
       "& .Draftail": {
         "&-Editor": {
-          borderColor: theme.palette.error.main
+          "&--focus": {
+            boxShadow: `inset 0px 0px 0px 2px ${theme.palette.primary.main}`
+          },
+          "&:hover": {
+            borderColor: theme.palette.primary.main
+          },
+          border: `1px ${theme.palette.divider} solid`,
+          borderRadius: 4,
+          padding: "27px 12px 10px",
+          position: "relative",
+          transition: theme.transitions.duration.shortest + "ms"
+        },
+        "&-Toolbar": {
+          "&Button": {
+            "& svg": {
+              padding: 2
+            },
+            "&--active": {
+              "&:hover": {
+                background: theme.palette.primary.main
+              },
+              "&:not(:hover)": {
+                borderRightColor: theme.palette.primary.main
+              },
+              background: theme.palette.primary.main
+            },
+            "&:focus": {
+              "&:active": {
+                "&:after": {
+                  background: fade(theme.palette.primary.main, 0.3),
+                  borderRadius: "100%",
+                  content: "''",
+                  display: "block",
+                  height: "100%",
+                  width: "100%"
+                }
+              }
+            },
+            "&:hover": {
+              background: fade(theme.palette.primary.main, 0.3)
+            },
+            alignItems: "center",
+            background: "none",
+            border: "none",
+            borderRight: `1px ${theme.palette.divider} solid`,
+            color: theme.typography.body1.color,
+            cursor: "pointer",
+            display: "inline-flex",
+            height: 36,
+            justifyContent: "center",
+            padding: theme.spacing(1) + 2,
+            transition: theme.transitions.duration.short + "ms",
+            width: 36
+          },
+          "&Group": {
+            "&:last-of-type": {
+              "& .Draftail-ToolbarButton": {
+                "&:last-of-type": {
+                  border: "none"
+                }
+              }
+            },
+            display: "flex"
+          },
+          background: theme.palette.background.default,
+          border: `1px ${theme.palette.divider} solid`,
+          display: "inline-flex",
+          flexWrap: "wrap",
+          marginBottom: theme.spacing(),
+          marginTop: 10,
+          [theme.breakpoints.down(460)]: {
+            width: "min-content"
+          }
+        },
+        "&-block": {
+          "&--blockquote": {
+            borderLeft: `2px solid ${theme.palette.divider}`,
+            margin: 0,
+            padding: theme.spacing(1, 2)
+          }
+        }
+      },
+      "&$error": {
+        "& .Draftail": {
+          "&-Editor": {
+            borderColor: theme.palette.error.main
+          }
         }
       }
-    }
-  },
-  scroll: {
-    "& .DraftEditor": {
-      "&-editorContainer": {
-        "& .public-DraftEditor-content": {
-          lineHeight: 1.62
+    },
+    scroll: {
+      "& .DraftEditor": {
+        "&-editorContainer": {
+          "& .public-DraftEditor-content": {
+            lineHeight: 1.62
+          }
         }
       }
+    },
+    smallIcon: {
+      marginLeft: 10
     }
-  },
-  smallIcon: {
-    marginLeft: 10
-  }
-}));
+  }),
+  { name: "RichTextEditor" }
+);
 
 function handleSave(
   value: any,
diff --git a/src/components/SaveButtonBar/SaveButtonBar.tsx b/src/components/SaveButtonBar/SaveButtonBar.tsx
index 079f675fc..6086349f9 100644
--- a/src/components/SaveButtonBar/SaveButtonBar.tsx
+++ b/src/components/SaveButtonBar/SaveButtonBar.tsx
@@ -14,45 +14,48 @@ import ConfirmButton, {
 } from "../ConfirmButton/ConfirmButton";
 import Container from "../Container";
 
-const useStyles = makeStyles(theme => ({
-  button: {
-    marginRight: theme.spacing(1)
-  },
-  cancelButton: {
-    marginRight: theme.spacing(2)
-  },
-  container: {
-    display: "flex",
-    paddingBottom: theme.spacing(2),
-    paddingTop: theme.spacing(2),
-    [theme.breakpoints.down("sm")]: {
-      marginTop: theme.spacing(1)
-    }
-  },
-  deleteButton: {
-    "&:hover": {
-      backgroundColor: theme.palette.error.dark
+const useStyles = makeStyles(
+  theme => ({
+    button: {
+      marginRight: theme.spacing(1)
     },
-    backgroundColor: theme.palette.error.main,
-    color: theme.palette.error.contrastText
-  },
-  root: {
-    background: theme.palette.background.default,
-    borderTop: "1px solid transparent",
-    boxShadow: `0 -5px 5px 0 ${theme.palette.divider}`,
-    height: "100%",
-    transition: `box-shadow ${theme.transitions.duration.shortest}ms`
-  },
-  spacer: {
-    flex: "1"
-  },
-  stop: {
-    "&$root": {
-      borderTopColor: theme.palette.divider,
-      boxShadow: `0 0 0 0 ${theme.palette.divider}`
+    cancelButton: {
+      marginRight: theme.spacing(2)
+    },
+    container: {
+      display: "flex",
+      paddingBottom: theme.spacing(2),
+      paddingTop: theme.spacing(2),
+      [theme.breakpoints.down("sm")]: {
+        marginTop: theme.spacing(1)
+      }
+    },
+    deleteButton: {
+      "&:hover": {
+        backgroundColor: theme.palette.error.dark
+      },
+      backgroundColor: theme.palette.error.main,
+      color: theme.palette.error.contrastText
+    },
+    root: {
+      background: theme.palette.background.default,
+      borderTop: "1px solid transparent",
+      boxShadow: `0 -5px 5px 0 ${theme.palette.divider}`,
+      height: "100%",
+      transition: `box-shadow ${theme.transitions.duration.shortest}ms`
+    },
+    spacer: {
+      flex: "1"
+    },
+    stop: {
+      "&$root": {
+        borderTopColor: theme.palette.divider,
+        boxShadow: `0 0 0 0 ${theme.palette.divider}`
+      }
     }
-  }
-}));
+  }),
+  { name: "SaveButtonBar" }
+);
 
 interface SaveButtonBarProps {
   disabled: boolean;
diff --git a/src/components/SeoForm/SeoForm.tsx b/src/components/SeoForm/SeoForm.tsx
index 0363c8933..d2d753825 100644
--- a/src/components/SeoForm/SeoForm.tsx
+++ b/src/components/SeoForm/SeoForm.tsx
@@ -11,52 +11,55 @@ import { FormattedMessage, useIntl } from "react-intl";
 import CardTitle from "../CardTitle";
 import FormSpacer from "../FormSpacer";
 
-const useStyles = makeStyles(theme => ({
-  addressBar: {
-    color: "#006621",
-    fontSize: "13px",
-    lineHeight: "16px",
-    marginBottom: "2px",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap"
-  },
-  container: {
-    width: "100%"
-  },
-  descriptionBar: {
-    color: "#545454",
-    fontSize: "13px",
-    lineHeight: "18px",
-    overflowWrap: "break-word"
-  },
-  helperText: {
-    marginBottom: theme.spacing(3)
-  },
-  label: {
-    flex: 1
-  },
-  labelContainer: {
-    "& span": {
-      paddingRight: 30
+const useStyles = makeStyles(
+  theme => ({
+    addressBar: {
+      color: "#006621",
+      fontSize: "13px",
+      lineHeight: "16px",
+      marginBottom: "2px",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
     },
-    display: "flex"
-  },
-  preview: {
-    minHeight: theme.spacing(10)
-  },
-  title: {
-    padding: 0
-  },
-  titleBar: {
-    color: "#1a0dab",
-    fontSize: "18px",
-    lineHeight: "21px",
-    overflowWrap: "break-word",
-    textDecoration: "none",
-    wordWrap: "break-word"
-  }
-}));
+    container: {
+      width: "100%"
+    },
+    descriptionBar: {
+      color: "#545454",
+      fontSize: "13px",
+      lineHeight: "18px",
+      overflowWrap: "break-word"
+    },
+    helperText: {
+      marginBottom: theme.spacing(3)
+    },
+    label: {
+      flex: 1
+    },
+    labelContainer: {
+      "& span": {
+        paddingRight: 30
+      },
+      display: "flex"
+    },
+    preview: {
+      minHeight: theme.spacing(10)
+    },
+    title: {
+      padding: 0
+    },
+    titleBar: {
+      color: "#1a0dab",
+      fontSize: "18px",
+      lineHeight: "21px",
+      overflowWrap: "break-word",
+      textDecoration: "none",
+      wordWrap: "break-word"
+    }
+  }),
+  { name: "SeoForm" }
+);
 
 interface SeoFormProps {
   description?: string;
diff --git a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx
index deb13f6cb..902103756 100644
--- a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx
+++ b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx
@@ -13,12 +13,15 @@ import SingleAutocompleteSelectFieldContent, {
   SingleAutocompleteChoiceType
 } from "./SingleAutocompleteSelectFieldContent";
 
-const useStyles = makeStyles({
-  container: {
-    flexGrow: 1,
-    position: "relative"
-  }
-});
+const useStyles = makeStyles(
+  {
+    container: {
+      flexGrow: 1,
+      position: "relative"
+    }
+  },
+  { name: "SingleAutocompleteSelectField" }
+);
 
 export interface SingleAutocompleteSelectFieldProps
   extends Partial<FetchMoreProps> {
diff --git a/src/components/SingleSelectField/SingleSelectField.tsx b/src/components/SingleSelectField/SingleSelectField.tsx
index 2bc4eadf7..39810f834 100644
--- a/src/components/SingleSelectField/SingleSelectField.tsx
+++ b/src/components/SingleSelectField/SingleSelectField.tsx
@@ -9,17 +9,20 @@ import classNames from "classnames";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
-const useStyles = makeStyles(theme => ({
-  formControl: {
-    "& label": {
-      top: "-3px"
+const useStyles = makeStyles(
+  theme => ({
+    formControl: {
+      "& label": {
+        top: "-3px"
+      },
+      width: "100%"
     },
-    width: "100%"
-  },
-  noLabel: {
-    padding: theme.spacing(2, 1.5)
-  }
-}));
+    noLabel: {
+      padding: theme.spacing(2, 1.5)
+    }
+  }),
+  { name: "SingleSelectField" }
+);
 
 interface SingleSelectFieldProps {
   choices: Array<{
diff --git a/src/components/Skeleton.tsx b/src/components/Skeleton.tsx
index bb5ded45f..4cefd2a04 100644
--- a/src/components/Skeleton.tsx
+++ b/src/components/Skeleton.tsx
@@ -2,29 +2,32 @@ import { makeStyles } from "@material-ui/core/styles";
 import classNames from "classnames";
 import React from "react";
 
-const useStyles = makeStyles(theme => ({
-  "@keyframes skeleton-animation": {
-    "0%": {
-      opacity: 0.6
+const useStyles = makeStyles(
+  theme => ({
+    "@keyframes skeleton-animation": {
+      "0%": {
+        opacity: 0.6
+      },
+      "100%": {
+        opacity: 1
+      }
     },
-    "100%": {
-      opacity: 1
+    primary: {
+      "&$skeleton": {
+        background: theme.palette.primary.main
+      }
+    },
+    skeleton: {
+      animation: "skeleton-animation .75s linear infinite forwards alternate",
+      background: theme.palette.background.default,
+      borderRadius: 4,
+      display: "block",
+      height: "0.8em",
+      margin: "0.2em 0"
     }
-  },
-  primary: {
-    "&$skeleton": {
-      background: theme.palette.primary.main
-    }
-  },
-  skeleton: {
-    animation: "skeleton-animation .75s linear infinite forwards alternate",
-    background: theme.palette.background.default,
-    borderRadius: 4,
-    display: "block",
-    height: "0.8em",
-    margin: "0.2em 0"
-  }
-}));
+  }),
+  { name: "Skeleton" }
+);
 
 interface SkeletonProps {
   className?: string;
diff --git a/src/components/SortableTable/SortableHandle.tsx b/src/components/SortableTable/SortableHandle.tsx
index 571b2b588..d9369fcb1 100644
--- a/src/components/SortableTable/SortableHandle.tsx
+++ b/src/components/SortableTable/SortableHandle.tsx
@@ -5,15 +5,18 @@ import { SortableHandle as SortableHandleHoc } from "react-sortable-hoc";
 
 import Draggable from "@saleor/icons/Draggable";
 
-const useStyles = makeStyles(theme => ({
-  columnDrag: {
-    "&:first-child": {
-      paddingRight: theme.spacing(2)
-    },
-    cursor: "grab",
-    width: 48 + theme.spacing(1.5)
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    columnDrag: {
+      "&:first-child": {
+        paddingRight: theme.spacing(2)
+      },
+      cursor: "grab",
+      width: 48 + theme.spacing(1.5)
+    }
+  }),
+  { name: "SortableHandle" }
+);
 
 const SortableHandle = SortableHandleHoc(() => {
   const classes = useStyles({});
diff --git a/src/components/SortableTable/SortableTableBody.tsx b/src/components/SortableTable/SortableTableBody.tsx
index 0902aca99..79d8f74fb 100644
--- a/src/components/SortableTable/SortableTableBody.tsx
+++ b/src/components/SortableTable/SortableTableBody.tsx
@@ -13,18 +13,21 @@ export interface SortableTableBodyProps {
   onSortEnd: ReorderAction;
 }
 
-const useStyles = makeStyles(theme => ({
-  ghost: {
-    "& td": {
-      borderBottom: "none"
-    },
-    background: theme.palette.background.paper,
-    fontFamily: theme.typography.fontFamily,
-    // FIXME: you damn know what
-    // fontSize: theme.overrides.MuiTableCell.root.fontSize,
-    opacity: 0.5
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    ghost: {
+      "& td": {
+        borderBottom: "none"
+      },
+      background: theme.palette.background.paper,
+      fontFamily: theme.typography.fontFamily,
+      // FIXME: you damn know what
+      // fontSize: theme.overrides.MuiTableCell.root.fontSize,
+      opacity: 0.5
+    }
+  }),
+  { name: "SortableTableBody" }
+);
 
 const SortableTableBody: React.FC<
   Omit<TableBodyProps & SortableTableBodyProps, "ref">
diff --git a/src/components/StatusLabel/StatusLabel.tsx b/src/components/StatusLabel/StatusLabel.tsx
index d1ad3d4e9..9024ed4d3 100644
--- a/src/components/StatusLabel/StatusLabel.tsx
+++ b/src/components/StatusLabel/StatusLabel.tsx
@@ -4,38 +4,41 @@ import Typography, { TypographyProps } from "@material-ui/core/Typography";
 import classNames from "classnames";
 import React from "react";
 
-const useStyles = makeStyles(theme => {
-  const dot = {
-    borderRadius: "100%",
-    content: "''",
-    display: "block",
-    height: 8,
-    left: -theme.spacing(2),
-    position: "absolute" as "absolute",
-    top: "calc(50% - 5px)",
-    width: 8
-  };
+const useStyles = makeStyles(
+  theme => {
+    const dot = {
+      borderRadius: "100%",
+      content: "''",
+      display: "block",
+      height: 8,
+      left: -theme.spacing(2),
+      position: "absolute" as "absolute",
+      top: "calc(50% - 5px)",
+      width: 8
+    };
 
-  return {
-    errorDot: {
-      "&:before": { backgroundColor: theme.palette.error.main, ...dot }
-    },
-    neutralDot: {
-      "&:before": { backgroundColor: yellow[500], ...dot }
-    },
-    root: {
-      display: "inline-block",
-      marginLeft: theme.spacing(1) + 8,
-      position: "relative"
-    },
-    span: {
-      display: "inline"
-    },
-    successDot: {
-      "&:before": { backgroundColor: theme.palette.primary.main, ...dot }
-    }
-  };
-});
+    return {
+      errorDot: {
+        "&:before": { backgroundColor: theme.palette.error.main, ...dot }
+      },
+      neutralDot: {
+        "&:before": { backgroundColor: yellow[500], ...dot }
+      },
+      root: {
+        display: "inline-block",
+        marginLeft: theme.spacing(1) + 8,
+        position: "relative"
+      },
+      span: {
+        display: "inline"
+      },
+      successDot: {
+        "&:before": { backgroundColor: theme.palette.primary.main, ...dot }
+      }
+    };
+  },
+  { name: "StatusLabel" }
+);
 
 interface StatusLabelProps {
   className?: string;
diff --git a/src/components/Tab/TabContainer.tsx b/src/components/Tab/TabContainer.tsx
index 74515878d..f4ed75019 100644
--- a/src/components/Tab/TabContainer.tsx
+++ b/src/components/Tab/TabContainer.tsx
@@ -5,11 +5,14 @@ export interface TabContainerProps {
   children: React.ReactNode | React.ReactNodeArray;
 }
 
-const useStyles = makeStyles(theme => ({
-  root: {
-    borderBottom: `1px solid ${theme.palette.divider}`
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    root: {
+      borderBottom: `1px solid ${theme.palette.divider}`
+    }
+  }),
+  { name: "TabContainer" }
+);
 
 const TabContainer: React.FC<TabContainerProps> = props => {
   const { children } = props;
diff --git a/src/components/TableCellAvatar/TableCellAvatar.tsx b/src/components/TableCellAvatar/TableCellAvatar.tsx
index 2d689bf8c..a5494e839 100644
--- a/src/components/TableCellAvatar/TableCellAvatar.tsx
+++ b/src/components/TableCellAvatar/TableCellAvatar.tsx
@@ -9,32 +9,35 @@ import Image from "../../icons/Image";
 
 export const AVATAR_MARGIN = 32;
 
-const useStyles = makeStyles(theme => ({
-  avatar: {
-    background: "none",
-    border: `1px solid ${theme.palette.divider}`,
-    borderRadius: 2,
-    color: "#bdbdbd",
-    display: "inline-flex",
-    padding: theme.spacing(0.5)
-  },
-  children: {
-    alignSelf: "center",
-    marginLeft: theme.spacing(2),
-    width: "100%"
-  },
-  content: {
-    alignItems: "center",
-    display: "flex"
-  },
-  root: {
-    "&:not(first-child)": {
-      paddingLeft: 0
+const useStyles = makeStyles(
+  theme => ({
+    avatar: {
+      background: "none",
+      border: `1px solid ${theme.palette.divider}`,
+      borderRadius: 2,
+      color: "#bdbdbd",
+      display: "inline-flex",
+      padding: theme.spacing(0.5)
     },
-    paddingRight: theme.spacing(3),
-    width: "1%"
-  }
-}));
+    children: {
+      alignSelf: "center",
+      marginLeft: theme.spacing(2),
+      width: "100%"
+    },
+    content: {
+      alignItems: "center",
+      display: "flex"
+    },
+    root: {
+      "&:not(first-child)": {
+        paddingLeft: 0
+      },
+      paddingRight: theme.spacing(3),
+      width: "1%"
+    }
+  }),
+  { name: "TableCellAvatar" }
+);
 
 interface TableCellAvatarProps {
   className?: string;
diff --git a/src/components/TableCellHeader/TableCellHeader.tsx b/src/components/TableCellHeader/TableCellHeader.tsx
index 4a2cd67fc..f6242eb5f 100644
--- a/src/components/TableCellHeader/TableCellHeader.tsx
+++ b/src/components/TableCellHeader/TableCellHeader.tsx
@@ -5,40 +5,43 @@ import React from "react";
 
 import ArrowSort from "../../icons/ArrowSort";
 
-const useStyles = makeStyles(theme => ({
-  arrow: {
-    transition: theme.transitions.duration.short + "ms"
-  },
-  arrowLeft: {
-    marginLeft: -24
-  },
-  arrowUp: {
-    transform: "rotate(180deg)"
-  },
-  label: {
-    alignSelf: "center",
-    display: "inline-block"
-  },
-  labelContainer: {
-    "&:hover": {
+const useStyles = makeStyles(
+  theme => ({
+    arrow: {
+      transition: theme.transitions.duration.short + "ms"
+    },
+    arrowLeft: {
+      marginLeft: -24
+    },
+    arrowUp: {
+      transform: "rotate(180deg)"
+    },
+    label: {
+      alignSelf: "center",
+      display: "inline-block"
+    },
+    labelContainer: {
+      "&:hover": {
+        color: theme.palette.text.primary
+      },
+      display: "flex",
+      height: 24
+    },
+    labelContainerActive: {
       color: theme.palette.text.primary
     },
-    display: "flex",
-    height: 24
-  },
-  labelContainerActive: {
-    color: theme.palette.text.primary
-  },
-  labelContainerCenter: {
-    justifyContent: "center"
-  },
-  labelContainerRight: {
-    justifyContent: "flex-end"
-  },
-  root: {
-    cursor: "pointer"
-  }
-}));
+    labelContainerCenter: {
+      justifyContent: "center"
+    },
+    labelContainerRight: {
+      justifyContent: "flex-end"
+    },
+    root: {
+      cursor: "pointer"
+    }
+  }),
+  { name: "TableCellHeader" }
+);
 
 export type TableCellHeaderArrowDirection = "asc" | "desc";
 export type TableCellHeaderArrowPosition = "left" | "right";
diff --git a/src/components/TableFilter/FilterTab.tsx b/src/components/TableFilter/FilterTab.tsx
index 0042784ed..21547a0ee 100644
--- a/src/components/TableFilter/FilterTab.tsx
+++ b/src/components/TableFilter/FilterTab.tsx
@@ -3,27 +3,30 @@ import Tab from "@material-ui/core/Tab";
 import classNames from "classnames";
 import React from "react";
 
-const useStyles = makeStyles(theme => ({
-  selectedTabLabel: {
-    "&$tabLabel": {
-      color: theme.typography.body1.color
-    }
-  },
-  tabLabel: {
-    "&:hover": {
-      color: theme.typography.body1.color
+const useStyles = makeStyles(
+  theme => ({
+    selectedTabLabel: {
+      "&$tabLabel": {
+        color: theme.typography.body1.color
+      }
     },
-    color: theme.typography.caption.color,
-    fontSize: "1rem",
-    fontWeight: 400
-  },
-  tabRoot: {
-    minWidth: "80px",
-    opacity: 1,
-    paddingTop: theme.spacing(1),
-    textTransform: "initial" as "initial"
-  }
-}));
+    tabLabel: {
+      "&:hover": {
+        color: theme.typography.body1.color
+      },
+      color: theme.typography.caption.color,
+      fontSize: "1rem",
+      fontWeight: 400
+    },
+    tabRoot: {
+      minWidth: "80px",
+      opacity: 1,
+      paddingTop: theme.spacing(1),
+      textTransform: "initial" as "initial"
+    }
+  }),
+  { name: "FilterTab" }
+);
 
 interface FilterTabProps {
   onClick: () => void;
diff --git a/src/components/TableFilter/FilterTabs.tsx b/src/components/TableFilter/FilterTabs.tsx
index a516a64ca..66a2f9d75 100644
--- a/src/components/TableFilter/FilterTabs.tsx
+++ b/src/components/TableFilter/FilterTabs.tsx
@@ -2,12 +2,15 @@ import { makeStyles } from "@material-ui/core/styles";
 import Tabs from "@material-ui/core/Tabs";
 import React from "react";
 
-const useStyles = makeStyles(theme => ({
-  tabsRoot: {
-    borderBottom: `1px solid ${theme.palette.divider}`,
-    paddingLeft: theme.spacing(3)
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    tabsRoot: {
+      borderBottom: `1px solid ${theme.palette.divider}`,
+      paddingLeft: theme.spacing(3)
+    }
+  }),
+  { name: "FilterTabs" }
+);
 
 interface FilterTabsProps {
   children?: React.ReactNode;
diff --git a/src/components/TableHead/TableHead.tsx b/src/components/TableHead/TableHead.tsx
index b1c408a8e..113a7cd65 100644
--- a/src/components/TableHead/TableHead.tsx
+++ b/src/components/TableHead/TableHead.tsx
@@ -24,59 +24,62 @@ export interface TableHeadProps extends MuiTableHeadProps {
   toggleAll?: (items: Node[], selected: number) => void;
 }
 
-const useStyles = makeStyles(theme => ({
-  cell: {
-    padding: 0
-  },
-  checkboxPartialSelect: {
-    "& input": {
-      "&:before": {
-        background: [theme.palette.background.paper, "!important"] as any,
-        border: `solid 1px ${theme.palette.primary.main}`,
-        content: "''"
-      },
-      background: theme.palette.background.paper
-    },
-    "&:after": {
-      background: theme.palette.primary.main,
-      content: "''",
-      height: 2,
-      position: "absolute",
-      width: 6
-    }
-  },
-  checkboxSelected: {
-    backgroundColor: fade(theme.palette.primary.main, 0.05)
-  },
-  container: {
-    alignItems: "center",
-    display: "flex",
-    height: 47,
-    marginRight: -theme.spacing(2)
-  },
-  dragRows: {
-    padding: 0,
-    width: 52
-  },
-  padding: {
-    "&:last-child": {
+const useStyles = makeStyles(
+  theme => ({
+    cell: {
       padding: 0
+    },
+    checkboxPartialSelect: {
+      "& input": {
+        "&:before": {
+          background: [theme.palette.background.paper, "!important"] as any,
+          border: `solid 1px ${theme.palette.primary.main}`,
+          content: "''"
+        },
+        background: theme.palette.background.paper
+      },
+      "&:after": {
+        background: theme.palette.primary.main,
+        content: "''",
+        height: 2,
+        position: "absolute",
+        width: 6
+      }
+    },
+    checkboxSelected: {
+      backgroundColor: fade(theme.palette.primary.main, 0.05)
+    },
+    container: {
+      alignItems: "center",
+      display: "flex",
+      height: 47,
+      marginRight: -theme.spacing(2)
+    },
+    dragRows: {
+      padding: 0,
+      width: 52
+    },
+    padding: {
+      "&:last-child": {
+        padding: 0
+      }
+    },
+    root: {
+      backgroundColor: fade(theme.palette.primary.main, 0.05),
+      paddingLeft: 0,
+      paddingRight: 24
+    },
+    spacer: {
+      flex: 1
+    },
+    toolbar: {
+      "& > *": {
+        marginLeft: theme.spacing(1)
+      }
     }
-  },
-  root: {
-    backgroundColor: fade(theme.palette.primary.main, 0.05),
-    paddingLeft: 0,
-    paddingRight: 24
-  },
-  spacer: {
-    flex: 1
-  },
-  toolbar: {
-    "& > *": {
-      marginLeft: theme.spacing(1)
-    }
-  }
-}));
+  }),
+  { name: "TableHead" }
+);
 
 const TableHead: React.FC<TableHeadProps> = props => {
   const {
diff --git a/src/components/TablePagination/TablePagination.tsx b/src/components/TablePagination/TablePagination.tsx
index ff64fb2ed..9a669bf0c 100644
--- a/src/components/TablePagination/TablePagination.tsx
+++ b/src/components/TablePagination/TablePagination.tsx
@@ -9,46 +9,49 @@ import { maybe } from "@saleor/misc";
 import { ListSettings } from "../../types";
 import TablePaginationActions from "./TablePaginationActions";
 
-const useStyles = makeStyles(theme => ({
-  actions: {
-    color: theme.palette.text.secondary,
-    flexShrink: 0,
-    marginLeft: theme.spacing(2.5)
-  },
-  caption: {
-    flexShrink: 0
-  },
-  input: {
-    flexShrink: 0,
-    fontSize: "inherit"
-  },
-  root: {
-    "&:last-child": {
-      padding: 0
+const useStyles = makeStyles(
+  theme => ({
+    actions: {
+      color: theme.palette.text.secondary,
+      flexShrink: 0,
+      marginLeft: theme.spacing(2.5)
+    },
+    caption: {
+      flexShrink: 0
+    },
+    input: {
+      flexShrink: 0,
+      fontSize: "inherit"
+    },
+    root: {
+      "&:last-child": {
+        padding: 0
+      }
+    },
+    select: {
+      paddingLeft: theme.spacing(),
+      paddingRight: theme.spacing(2)
+    },
+    selectIcon: {
+      top: 1
+    },
+    selectRoot: {
+      color: theme.palette.text.secondary,
+      marginLeft: theme.spacing(),
+      marginRight: theme.spacing(4)
+    },
+    spacer: {
+      flex: "1 1 100%"
+    },
+    toolbar: {
+      height: 56,
+      minHeight: 56,
+      paddingLeft: 2,
+      paddingRight: 2
     }
-  },
-  select: {
-    paddingLeft: theme.spacing(),
-    paddingRight: theme.spacing(2)
-  },
-  selectIcon: {
-    top: 1
-  },
-  selectRoot: {
-    color: theme.palette.text.secondary,
-    marginLeft: theme.spacing(),
-    marginRight: theme.spacing(4)
-  },
-  spacer: {
-    flex: "1 1 100%"
-  },
-  toolbar: {
-    height: 56,
-    minHeight: 56,
-    paddingLeft: 2,
-    paddingRight: 2
-  }
-}));
+  }),
+  { name: "TablePagination" }
+);
 
 interface TablePaginationProps {
   backIconButtonProps?: Partial<IconButtonProps>;
diff --git a/src/components/TablePagination/TablePaginationActions.tsx b/src/components/TablePagination/TablePaginationActions.tsx
index d49020417..f847475d3 100644
--- a/src/components/TablePagination/TablePaginationActions.tsx
+++ b/src/components/TablePagination/TablePaginationActions.tsx
@@ -7,47 +7,50 @@ import useTheme from "@saleor/hooks/useTheme";
 import classNames from "classnames";
 import React from "react";
 
-const useStyles = makeStyles(theme => ({
-  dark: {
-    "& svg": {
-      color: theme.palette.primary.main
-    },
-    "&$disabled": {
+const useStyles = makeStyles(
+  theme => ({
+    dark: {
       "& svg": {
-        color: fade(theme.palette.primary.main, 0.2)
-      }
-    },
-    "&:focus, &:hover": {
-      "& > span:first-of-type": {
-        backgroundColor: fade(theme.palette.primary.main, 0.2)
-      }
-    }
-  },
-  disabled: {},
-  iconButton: {
-    "& > span:first-of-type": {
-      backgroundColor: theme.palette.background.default,
-      borderRadius: "100%",
-      transition: theme.transitions.duration.standard + "ms"
-    },
-    "& svg": {
-      border: `solid 1px #BDBDBD`,
-      borderRadius: "50%"
-    },
-    "&:focus, &:hover": {
-      "& > span:first-of-type": {
-        backgroundColor: fade(theme.palette.primary.main, 0.2)
+        color: theme.palette.primary.main
       },
-      backgroundColor: "transparent"
+      "&$disabled": {
+        "& svg": {
+          color: fade(theme.palette.primary.main, 0.2)
+        }
+      },
+      "&:focus, &:hover": {
+        "& > span:first-of-type": {
+          backgroundColor: fade(theme.palette.primary.main, 0.2)
+        }
+      }
     },
-    padding: 6
-  },
-  root: {
-    color: theme.palette.text.secondary,
-    flexShrink: 0,
-    margin: theme.spacing(0, 2.5)
-  }
-}));
+    disabled: {},
+    iconButton: {
+      "& > span:first-of-type": {
+        backgroundColor: theme.palette.background.default,
+        borderRadius: "100%",
+        transition: theme.transitions.duration.standard + "ms"
+      },
+      "& svg": {
+        border: `solid 1px #BDBDBD`,
+        borderRadius: "50%"
+      },
+      "&:focus, &:hover": {
+        "& > span:first-of-type": {
+          backgroundColor: fade(theme.palette.primary.main, 0.2)
+        },
+        backgroundColor: "transparent"
+      },
+      padding: 6
+    },
+    root: {
+      color: theme.palette.text.secondary,
+      flexShrink: 0,
+      margin: theme.spacing(0, 2.5)
+    }
+  }),
+  { name: "TablePaginationActions" }
+);
 
 export interface TablePaginationActionsProps {
   backIconButtonProps?: any;
diff --git a/src/components/TextFieldWithChoice/TextFieldWithChoice.tsx b/src/components/TextFieldWithChoice/TextFieldWithChoice.tsx
index 9f634bf5b..ef2d82f7d 100644
--- a/src/components/TextFieldWithChoice/TextFieldWithChoice.tsx
+++ b/src/components/TextFieldWithChoice/TextFieldWithChoice.tsx
@@ -23,16 +23,19 @@ export type TextFieldWithChoiceProps<TValue = string> = TextFieldProps & {
   };
 };
 
-const useStyles = makeStyles({
-  adornment: {
-    alignItems: "center",
-    cursor: "pointer",
-    display: "flex"
+const useStyles = makeStyles(
+  {
+    adornment: {
+      alignItems: "center",
+      cursor: "pointer",
+      display: "flex"
+    },
+    menu: {
+      zIndex: 10
+    }
   },
-  menu: {
-    zIndex: 10
-  }
-});
+  { name: "TextFieldWithChoice" }
+);
 
 const TextFieldWithChoice: React.FC<TextFieldWithChoiceProps> = props => {
   const { ChoiceProps, InputProps, onChange, ...rest } = props;
diff --git a/src/components/Timeline/TimelineEvent.tsx b/src/components/Timeline/TimelineEvent.tsx
index 906b7dfa9..e3b2c28f8 100644
--- a/src/components/Timeline/TimelineEvent.tsx
+++ b/src/components/Timeline/TimelineEvent.tsx
@@ -8,56 +8,59 @@ import React from "react";
 
 import { DateTime } from "../Date";
 
-const useStyles = makeStyles(theme => ({
-  date: {
-    color: theme.typography.caption.color
-  },
-  dateExpander: {
-    color: theme.typography.caption.color,
-    position: "absolute",
-    right: theme.spacing(3)
-  },
-  dot: {
-    backgroundColor: theme.palette.primary.main,
-    borderRadius: "100%",
-    height: 8,
-    left: -29,
-    position: "absolute",
-    top: 6,
-    width: 8
-  },
-  noExpander: {
-    alignItems: "center",
-    display: "flex",
-    justifyContent: "space-between",
-    marginBottom: theme.spacing(),
-    marginLeft: theme.spacing(3),
-    width: "100%"
-  },
-  panel: {
-    "&:before": {
-      display: "none"
+const useStyles = makeStyles(
+  theme => ({
+    date: {
+      color: theme.typography.caption.color
     },
-    background: "none",
-    width: "100%"
-  },
-  root: {
-    "&:last-child:after": {
-      background: theme.palette.background.default,
-      content: "''",
-      height: "calc(50% - 4px)",
-      left: -theme.spacing(3) - 2,
+    dateExpander: {
+      color: theme.typography.caption.color,
       position: "absolute",
-      top: "calc(50% + 4px)",
-      width: "2px"
+      right: theme.spacing(3)
     },
-    alignItems: "center",
-    display: "flex",
-    marginBottom: theme.spacing(3),
-    position: "relative",
-    width: "100%"
-  }
-}));
+    dot: {
+      backgroundColor: theme.palette.primary.main,
+      borderRadius: "100%",
+      height: 8,
+      left: -29,
+      position: "absolute",
+      top: 6,
+      width: 8
+    },
+    noExpander: {
+      alignItems: "center",
+      display: "flex",
+      justifyContent: "space-between",
+      marginBottom: theme.spacing(),
+      marginLeft: theme.spacing(3),
+      width: "100%"
+    },
+    panel: {
+      "&:before": {
+        display: "none"
+      },
+      background: "none",
+      width: "100%"
+    },
+    root: {
+      "&:last-child:after": {
+        background: theme.palette.background.default,
+        content: "''",
+        height: "calc(50% - 4px)",
+        left: -theme.spacing(3) - 2,
+        position: "absolute",
+        top: "calc(50% + 4px)",
+        width: "2px"
+      },
+      alignItems: "center",
+      display: "flex",
+      marginBottom: theme.spacing(3),
+      position: "relative",
+      width: "100%"
+    }
+  }),
+  { name: "TimelineEvent" }
+);
 
 interface TimelineEventProps {
   children?: React.ReactNode;
diff --git a/src/components/Timeline/TimelineNote.tsx b/src/components/Timeline/TimelineNote.tsx
index 83764208a..bdeb5cdef 100644
--- a/src/components/Timeline/TimelineNote.tsx
+++ b/src/components/Timeline/TimelineNote.tsx
@@ -29,37 +29,40 @@ const palette = [
   colors.yellow
 ].map(color => color[500]);
 
-const useStyles = makeStyles(theme => ({
-  avatar: {
-    left: -45,
-    position: "absolute",
-    top: 0
-  },
-  card: {
-    marginBottom: theme.spacing(3),
-    marginLeft: theme.spacing(3),
-    position: "relative"
-  },
-  cardContent: {
-    "&:last-child": {
-      padding: 16
+const useStyles = makeStyles(
+  theme => ({
+    avatar: {
+      left: -45,
+      position: "absolute",
+      top: 0
     },
-    boxShadow: "0px 5px 10px rgba(0, 0, 0, 0.05)"
-  },
-  root: {
-    position: "relative"
-  },
-  title: {
-    "& p": {
-      fontSize: "14px"
+    card: {
+      marginBottom: theme.spacing(3),
+      marginLeft: theme.spacing(3),
+      position: "relative"
     },
-    alignItems: "center",
-    display: "flex",
-    justifyContent: "space-between",
-    marginBottom: theme.spacing(),
-    paddingLeft: theme.spacing(3)
-  }
-}));
+    cardContent: {
+      "&:last-child": {
+        padding: 16
+      },
+      boxShadow: "0px 5px 10px rgba(0, 0, 0, 0.05)"
+    },
+    root: {
+      position: "relative"
+    },
+    title: {
+      "& p": {
+        fontSize: "14px"
+      },
+      alignItems: "center",
+      display: "flex",
+      justifyContent: "space-between",
+      marginBottom: theme.spacing(),
+      paddingLeft: theme.spacing(3)
+    }
+  }),
+  { name: "TimelineNote" }
+);
 
 interface TimelineNoteProps {
   date: string;
diff --git a/src/components/VisibilityCard/VisibilityCard.tsx b/src/components/VisibilityCard/VisibilityCard.tsx
index 01372d0ed..6bca5b70d 100644
--- a/src/components/VisibilityCard/VisibilityCard.tsx
+++ b/src/components/VisibilityCard/VisibilityCard.tsx
@@ -10,36 +10,39 @@ import CardTitle from "@saleor/components/CardTitle";
 import RadioSwitchField from "@saleor/components/RadioSwitchField";
 import { DateContext } from "../Date/DateContext";
 
-const useStyles = makeStyles(theme => ({
-  children: {
-    "& button": {
-      margin: "0 9px"
+const useStyles = makeStyles(
+  theme => ({
+    children: {
+      "& button": {
+        margin: "0 9px"
+      },
+      "& label": {
+        marginTop: theme.spacing(2.5)
+      }
     },
-    "& label": {
-      marginTop: theme.spacing(2.5)
+    date: {
+      "& svg": {
+        fill: theme.palette.primary.main
+      },
+      marginTop: theme.spacing(3)
+    },
+    label: {
+      lineHeight: 1,
+      margin: 0
+    },
+    secondLabel: {
+      fontSize: 12
+    },
+    setPublicationDate: {
+      color: theme.palette.primary.main,
+      cursor: "pointer",
+      fontSize: "14px",
+      paddingTop: "15px",
+      textDecoration: "underline"
     }
-  },
-  date: {
-    "& svg": {
-      fill: theme.palette.primary.main
-    },
-    marginTop: theme.spacing(3)
-  },
-  label: {
-    lineHeight: 1,
-    margin: 0
-  },
-  secondLabel: {
-    fontSize: 12
-  },
-  setPublicationDate: {
-    color: theme.palette.primary.main,
-    cursor: "pointer",
-    fontSize: "14px",
-    paddingTop: "15px",
-    textDecoration: "underline"
-  }
-}));
+  }),
+  { name: "VisibilityCard" }
+);
 
 interface VisibilityCardProps {
   children?: React.ReactNode | React.ReactNodeArray;
diff --git a/src/configuration/ConfigurationPage.tsx b/src/configuration/ConfigurationPage.tsx
index 4e2e0a1e5..2704cd8be 100644
--- a/src/configuration/ConfigurationPage.tsx
+++ b/src/configuration/ConfigurationPage.tsx
@@ -26,64 +26,67 @@ export interface MenuSection {
   menuItems: MenuItem[];
 }
 
-const useStyles = makeStyles(theme => ({
-  card: {
-    "&:hover": {
-      boxShadow: "0px 5px 15px rgba(0, 0, 0, 0.15);"
+const useStyles = makeStyles(
+  theme => ({
+    card: {
+      "&:hover": {
+        boxShadow: "0px 5px 15px rgba(0, 0, 0, 0.15);"
+      },
+      cursor: "pointer",
+      marginBottom: theme.spacing(3),
+      transition: theme.transitions.duration.standard + "ms"
     },
-    cursor: "pointer",
-    marginBottom: theme.spacing(3),
-    transition: theme.transitions.duration.standard + "ms"
-  },
-  cardContent: {
-    // Overrides Material-UI default theme
-    "&:last-child": {
-      paddingBottom: 16
+    cardContent: {
+      // Overrides Material-UI default theme
+      "&:last-child": {
+        paddingBottom: 16
+      },
+      display: "grid",
+      gridColumnGap: theme.spacing(4),
+      gridTemplateColumns: "48px 1fr"
     },
-    display: "grid",
-    gridColumnGap: theme.spacing(4),
-    gridTemplateColumns: "48px 1fr"
-  },
-  cardDisabled: {
-    "& $icon, & $sectionTitle, & $sectionDescription": {
-      color: theme.palette.text.disabled
+    cardDisabled: {
+      "& $icon, & $sectionTitle, & $sectionDescription": {
+        color: theme.palette.text.disabled
+      },
+      marginBottom: theme.spacing(3)
     },
-    marginBottom: theme.spacing(3)
-  },
-  configurationCategory: {
-    [theme.breakpoints.down("md")]: {
-      gridTemplateColumns: "1fr"
+    configurationCategory: {
+      [theme.breakpoints.down("md")]: {
+        gridTemplateColumns: "1fr"
+      },
+      borderTop: `solid 1px ${theme.palette.divider}`,
+      display: "grid",
+      gridColumnGap: theme.spacing(4) + "px",
+      gridTemplateColumns: "1fr 3fr",
+      paddingTop: theme.spacing(3)
     },
-    borderTop: `solid 1px ${theme.palette.divider}`,
-    display: "grid",
-    gridColumnGap: theme.spacing(4) + "px",
-    gridTemplateColumns: "1fr 3fr",
-    paddingTop: theme.spacing(3)
-  },
-  configurationItem: {
-    [theme.breakpoints.down("md")]: {
-      gridTemplateColumns: "1fr"
+    configurationItem: {
+      [theme.breakpoints.down("md")]: {
+        gridTemplateColumns: "1fr"
+      },
+      display: "grid",
+      gridColumnGap: theme.spacing(4),
+      gridTemplateColumns: "1fr 1fr"
     },
-    display: "grid",
-    gridColumnGap: theme.spacing(4),
-    gridTemplateColumns: "1fr 1fr"
-  },
-  configurationLabel: {
-    paddingBottom: 20
-  },
-  header: {
-    margin: 0
-  },
-  icon: {
-    color: theme.palette.primary.main,
-    fontSize: 48
-  },
-  sectionDescription: {},
-  sectionTitle: {
-    fontSize: 20,
-    fontWeight: 600 as 600
-  }
-}));
+    configurationLabel: {
+      paddingBottom: 20
+    },
+    header: {
+      margin: 0
+    },
+    icon: {
+      color: theme.palette.primary.main,
+      fontSize: 48
+    },
+    sectionDescription: {},
+    sectionTitle: {
+      fontSize: 20,
+      fontWeight: 600 as 600
+    }
+  }),
+  { name: "ConfigurationPage" }
+);
 
 export interface ConfigurationPageProps {
   menu: MenuSection[];
diff --git a/src/customers/components/CustomerAddress/CustomerAddress.tsx b/src/customers/components/CustomerAddress/CustomerAddress.tsx
index eb16509a3..59dfbe2f7 100644
--- a/src/customers/components/CustomerAddress/CustomerAddress.tsx
+++ b/src/customers/components/CustomerAddress/CustomerAddress.tsx
@@ -25,21 +25,24 @@ export interface CustomerAddressProps {
   onSetAsDefault: (type: AddressTypeEnum) => void;
 }
 
-const useStyles = makeStyles({
-  actions: {
-    flexDirection: "row"
+const useStyles = makeStyles(
+  {
+    actions: {
+      flexDirection: "row"
+    },
+    actionsContainer: {
+      display: "flex",
+      flexDirection: "column",
+      height: "100%",
+      justifyContent: "flex-end"
+    },
+    card: {
+      display: "flex",
+      flexDirection: "column"
+    }
   },
-  actionsContainer: {
-    display: "flex",
-    flexDirection: "column",
-    height: "100%",
-    justifyContent: "flex-end"
-  },
-  card: {
-    display: "flex",
-    flexDirection: "column"
-  }
-});
+  { name: "CustomerAddress" }
+);
 const CustomerAddress: React.FC<CustomerAddressProps> = props => {
   const {
     address,
diff --git a/src/customers/components/CustomerAddressListPage/CustomerAddressListPage.tsx b/src/customers/components/CustomerAddressListPage/CustomerAddressListPage.tsx
index 4ff11c32b..d823a8d0b 100644
--- a/src/customers/components/CustomerAddressListPage/CustomerAddressListPage.tsx
+++ b/src/customers/components/CustomerAddressListPage/CustomerAddressListPage.tsx
@@ -23,25 +23,28 @@ export interface CustomerAddressListPageProps {
   onSetAsDefault: (id: string, type: AddressTypeEnum) => void;
 }
 
-const useStyles = makeStyles(theme => ({
-  addButton: {
-    marginTop: theme.spacing(2)
-  },
-  description: {
-    marginTop: theme.spacing(1)
-  },
-  empty: {
-    margin: `${theme.spacing(13)}px auto 0`,
-    textAlign: "center",
-    width: 600
-  },
-  root: {
-    columnGap: theme.spacing(3),
-    display: "grid",
-    gridTemplateColumns: "repeat(3, 1fr)",
-    rowGap: theme.spacing(3)
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    addButton: {
+      marginTop: theme.spacing(2)
+    },
+    description: {
+      marginTop: theme.spacing(1)
+    },
+    empty: {
+      margin: `${theme.spacing(13)}px auto 0`,
+      textAlign: "center",
+      width: 600
+    },
+    root: {
+      columnGap: theme.spacing(3),
+      display: "grid",
+      gridTemplateColumns: "repeat(3, 1fr)",
+      rowGap: theme.spacing(3)
+    }
+  }),
+  { name: "CustomerAddressListPage" }
+);
 
 const CustomerAddressListPage: React.FC<
   CustomerAddressListPageProps
diff --git a/src/customers/components/CustomerAddresses/CustomerAddresses.tsx b/src/customers/components/CustomerAddresses/CustomerAddresses.tsx
index c2e85983a..99241e255 100644
--- a/src/customers/components/CustomerAddresses/CustomerAddresses.tsx
+++ b/src/customers/components/CustomerAddresses/CustomerAddresses.tsx
@@ -13,12 +13,15 @@ import { buttonMessages } from "@saleor/intl";
 import { maybe } from "../../../misc";
 import { CustomerDetails_user } from "../../types/CustomerDetails";
 
-const useStyles = makeStyles(theme => ({
-  label: {
-    fontWeight: 600,
-    marginBottom: theme.spacing(1)
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    label: {
+      fontWeight: 600,
+      marginBottom: theme.spacing(1)
+    }
+  }),
+  { name: "CustomerAddresses" }
+);
 
 export interface CustomerAddressesProps {
   customer: CustomerDetails_user;
diff --git a/src/customers/components/CustomerCreateAddress/CustomerCreateAddress.tsx b/src/customers/components/CustomerCreateAddress/CustomerCreateAddress.tsx
index 9e43094cc..530099ddf 100644
--- a/src/customers/components/CustomerCreateAddress/CustomerCreateAddress.tsx
+++ b/src/customers/components/CustomerCreateAddress/CustomerCreateAddress.tsx
@@ -12,11 +12,14 @@ import { SingleAutocompleteChoiceType } from "@saleor/components/SingleAutocompl
 import { FormErrors } from "../../../types";
 import { AddressTypeInput } from "../../types";
 
-const useStyles = makeStyles({
-  overflow: {
-    overflow: "visible"
-  }
-});
+const useStyles = makeStyles(
+  {
+    overflow: {
+      overflow: "visible"
+    }
+  },
+  { name: "CustomerCreateAddress" }
+);
 
 export interface CustomerCreateAddressProps {
   countries: SingleAutocompleteChoiceType[];
diff --git a/src/customers/components/CustomerCreateDetails/CustomerCreateDetails.tsx b/src/customers/components/CustomerCreateDetails/CustomerCreateDetails.tsx
index fa3c16910..9d41fd203 100644
--- a/src/customers/components/CustomerCreateDetails/CustomerCreateDetails.tsx
+++ b/src/customers/components/CustomerCreateDetails/CustomerCreateDetails.tsx
@@ -10,14 +10,17 @@ import { commonMessages } from "@saleor/intl";
 import { FormErrors } from "../../../types";
 import { CustomerCreatePageFormData } from "../CustomerCreatePage";
 
-const useStyles = makeStyles(theme => ({
-  root: {
-    display: "grid",
-    gridColumnGap: theme.spacing(2),
-    gridRowGap: theme.spacing(3),
-    gridTemplateColumns: "1fr 1fr"
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    root: {
+      display: "grid",
+      gridColumnGap: theme.spacing(2),
+      gridRowGap: theme.spacing(3),
+      gridTemplateColumns: "1fr 1fr"
+    }
+  }),
+  { name: "CustomerCreateDetails" }
+);
 
 export interface CustomerCreateDetailsProps {
   data: CustomerCreatePageFormData;
diff --git a/src/customers/components/CustomerDetails/CustomerDetails.tsx b/src/customers/components/CustomerDetails/CustomerDetails.tsx
index 1db8cf109..681aa6bf4 100644
--- a/src/customers/components/CustomerDetails/CustomerDetails.tsx
+++ b/src/customers/components/CustomerDetails/CustomerDetails.tsx
@@ -14,20 +14,23 @@ import { maybe } from "@saleor/misc";
 import { FormErrors } from "@saleor/types";
 import { CustomerDetails_user } from "../../types/CustomerDetails";
 
-const useStyles = makeStyles(theme => ({
-  cardTitle: {
-    height: 72
-  },
-  checkbox: {
-    marginBottom: theme.spacing()
-  },
-  content: {
-    paddingTop: theme.spacing()
-  },
-  subtitle: {
-    marginTop: theme.spacing()
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    cardTitle: {
+      height: 72
+    },
+    checkbox: {
+      marginBottom: theme.spacing()
+    },
+    content: {
+      paddingTop: theme.spacing()
+    },
+    subtitle: {
+      marginTop: theme.spacing()
+    }
+  }),
+  { name: "CustomerDetails" }
+);
 
 export interface CustomerDetailsProps {
   customer: CustomerDetails_user;
diff --git a/src/customers/components/CustomerInfo/CustomerInfo.tsx b/src/customers/components/CustomerInfo/CustomerInfo.tsx
index 26c6893a9..e292bbbb6 100644
--- a/src/customers/components/CustomerInfo/CustomerInfo.tsx
+++ b/src/customers/components/CustomerInfo/CustomerInfo.tsx
@@ -11,17 +11,20 @@ import Grid from "@saleor/components/Grid";
 import Hr from "@saleor/components/Hr";
 import { commonMessages } from "@saleor/intl";
 
-const useStyles = makeStyles(theme => ({
-  content: {
-    paddingTop: theme.spacing(2)
-  },
-  hr: {
-    margin: theme.spacing(3, 0)
-  },
-  sectionHeader: {
-    marginBottom: theme.spacing()
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    content: {
+      paddingTop: theme.spacing(2)
+    },
+    hr: {
+      margin: theme.spacing(3, 0)
+    },
+    sectionHeader: {
+      marginBottom: theme.spacing()
+    }
+  }),
+  { name: "CustomerInfo" }
+);
 
 export interface CustomerInfoProps {
   data: {
diff --git a/src/customers/components/CustomerList/CustomerList.tsx b/src/customers/components/CustomerList/CustomerList.tsx
index c2de1fa67..829d13137 100644
--- a/src/customers/components/CustomerList/CustomerList.tsx
+++ b/src/customers/components/CustomerList/CustomerList.tsx
@@ -15,25 +15,28 @@ import { getUserName, maybe, renderCollection } from "@saleor/misc";
 import { ListActions, ListProps } from "@saleor/types";
 import { ListCustomers_customers_edges_node } from "../../types/ListCustomers";
 
-const useStyles = makeStyles(theme => ({
-  [theme.breakpoints.up("lg")]: {
+const useStyles = makeStyles(
+  theme => ({
+    [theme.breakpoints.up("lg")]: {
+      colEmail: {},
+      colName: {},
+      colOrders: {
+        width: 200
+      }
+    },
     colEmail: {},
-    colName: {},
+    colName: {
+      paddingLeft: 0
+    },
     colOrders: {
-      width: 200
+      textAlign: "center"
+    },
+    tableRow: {
+      cursor: "pointer"
     }
-  },
-  colEmail: {},
-  colName: {
-    paddingLeft: 0
-  },
-  colOrders: {
-    textAlign: "center"
-  },
-  tableRow: {
-    cursor: "pointer"
-  }
-}));
+  }),
+  { name: "CustomerList" }
+);
 
 export interface CustomerListProps extends ListProps, ListActions {
   customers: ListCustomers_customers_edges_node[];
diff --git a/src/customers/components/CustomerOrders/CustomerOrders.tsx b/src/customers/components/CustomerOrders/CustomerOrders.tsx
index f12fe185d..09800e4cd 100644
--- a/src/customers/components/CustomerOrders/CustomerOrders.tsx
+++ b/src/customers/components/CustomerOrders/CustomerOrders.tsx
@@ -17,14 +17,17 @@ import StatusLabel from "@saleor/components/StatusLabel";
 import { maybe, renderCollection, transformPaymentStatus } from "../../../misc";
 import { CustomerDetails_user_orders_edges_node } from "../../types/CustomerDetails";
 
-const useStyles = makeStyles({
-  link: {
-    cursor: "pointer"
+const useStyles = makeStyles(
+  {
+    link: {
+      cursor: "pointer"
+    },
+    textRight: {
+      textAlign: "right"
+    }
   },
-  textRight: {
-    textAlign: "right"
-  }
-});
+  { name: "CustomerOrders" }
+);
 
 export interface CustomerOrdersProps {
   orders: CustomerDetails_user_orders_edges_node[];
diff --git a/src/customers/components/CustomerStats/CustomerStats.tsx b/src/customers/components/CustomerStats/CustomerStats.tsx
index f751782ce..1187c502a 100644
--- a/src/customers/components/CustomerStats/CustomerStats.tsx
+++ b/src/customers/components/CustomerStats/CustomerStats.tsx
@@ -12,14 +12,17 @@ import Skeleton from "@saleor/components/Skeleton";
 import { maybe } from "../../../misc";
 import { CustomerDetails_user } from "../../types/CustomerDetails";
 
-const useStyles = makeStyles(theme => ({
-  label: {
-    marginBottom: theme.spacing(1)
-  },
-  value: {
-    fontSize: 24
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    label: {
+      marginBottom: theme.spacing(1)
+    },
+    value: {
+      fontSize: 24
+    }
+  }),
+  { name: "CustomerStats" }
+);
 
 export interface CustomerStatsProps {
   customer: CustomerDetails_user;
diff --git a/src/discounts/components/DiscountCategories/DiscountCategories.tsx b/src/discounts/components/DiscountCategories/DiscountCategories.tsx
index fb1263b77..1a805509b 100644
--- a/src/discounts/components/DiscountCategories/DiscountCategories.tsx
+++ b/src/discounts/components/DiscountCategories/DiscountCategories.tsx
@@ -27,23 +27,26 @@ export interface DiscountCategoriesProps extends ListProps, ListActions {
   onCategoryUnassign: (id: string) => void;
 }
 
-const useStyles = makeStyles(theme => ({
-  iconCell: {
-    "&:last-child": {
-      paddingRight: 0
+const useStyles = makeStyles(
+  theme => ({
+    iconCell: {
+      "&:last-child": {
+        paddingRight: 0
+      },
+      width: 48 + theme.spacing(0.5)
     },
-    width: 48 + theme.spacing(0.5)
-  },
-  tableRow: {
-    cursor: "pointer"
-  },
-  textRight: {
-    textAlign: "right"
-  },
-  wideColumn: {
-    width: "60%"
-  }
-}));
+    tableRow: {
+      cursor: "pointer"
+    },
+    textRight: {
+      textAlign: "right"
+    },
+    wideColumn: {
+      width: "60%"
+    }
+  }),
+  { name: "DiscountCategories" }
+);
 
 const numberOfColumns = 4;
 
diff --git a/src/discounts/components/DiscountCollections/DiscountCollections.tsx b/src/discounts/components/DiscountCollections/DiscountCollections.tsx
index 0d196c4b2..3484bc853 100644
--- a/src/discounts/components/DiscountCollections/DiscountCollections.tsx
+++ b/src/discounts/components/DiscountCollections/DiscountCollections.tsx
@@ -27,23 +27,26 @@ export interface DiscountCollectionsProps extends ListProps, ListActions {
   onCollectionUnassign: (id: string) => void;
 }
 
-const useStyles = makeStyles(theme => ({
-  iconCell: {
-    "&:last-child": {
-      paddingRight: 0
+const useStyles = makeStyles(
+  theme => ({
+    iconCell: {
+      "&:last-child": {
+        paddingRight: 0
+      },
+      width: 48 + theme.spacing(0.5)
     },
-    width: 48 + theme.spacing(0.5)
-  },
-  tableRow: {
-    cursor: "pointer"
-  },
-  textRight: {
-    textAlign: "right"
-  },
-  wideColumn: {
-    width: "60%"
-  }
-}));
+    tableRow: {
+      cursor: "pointer"
+    },
+    textRight: {
+      textAlign: "right"
+    },
+    wideColumn: {
+      width: "60%"
+    }
+  }),
+  { name: "DiscountCollections" }
+);
 
 const numberOfColumns = 4;
 
diff --git a/src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx b/src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx
index 160345883..0b8991c76 100644
--- a/src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx
+++ b/src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx
@@ -40,21 +40,24 @@ export interface DiscountCountrySelectDialogProps {
   onConfirm: (data: FormData) => void;
 }
 
-const useStyles = makeStyles(theme => ({
-  checkboxCell: {
-    paddingLeft: 0
-  },
-  container: {
-    maxHeight: 500
-  },
-  heading: {
-    marginBottom: theme.spacing(2),
-    marginTop: theme.spacing(2)
-  },
-  wideCell: {
-    width: "100%"
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    checkboxCell: {
+      paddingLeft: 0
+    },
+    container: {
+      maxHeight: 500
+    },
+    heading: {
+      marginBottom: theme.spacing(2),
+      marginTop: theme.spacing(2)
+    },
+    wideCell: {
+      width: "100%"
+    }
+  }),
+  { name: "DiscountCountrySelectDialog" }
+);
 const DiscountCountrySelectDialog: React.FC<
   DiscountCountrySelectDialogProps
 > = props => {
diff --git a/src/discounts/components/DiscountProducts/DiscountProducts.tsx b/src/discounts/components/DiscountProducts/DiscountProducts.tsx
index ccdbc3841..b9ee5828d 100644
--- a/src/discounts/components/DiscountProducts/DiscountProducts.tsx
+++ b/src/discounts/components/DiscountProducts/DiscountProducts.tsx
@@ -31,33 +31,36 @@ export interface SaleProductsProps extends ListProps, ListActions {
   onProductUnassign: (id: string) => void;
 }
 
-const useStyles = makeStyles(theme => ({
-  colActions: {
-    "&:last-child": {
-      paddingRight: 0
+const useStyles = makeStyles(
+  theme => ({
+    colActions: {
+      "&:last-child": {
+        paddingRight: 0
+      },
+      width: 76 + theme.spacing(0.5)
     },
-    width: 76 + theme.spacing(0.5)
-  },
-  colName: {
-    paddingLeft: 0,
-    width: "auto"
-  },
-  colNameLabel: {
-    marginLeft: AVATAR_MARGIN
-  },
-  colPublished: {
-    width: 150
-  },
-  colType: {
-    width: 200
-  },
-  table: {
-    tableLayout: "fixed"
-  },
-  tableRow: {
-    cursor: "pointer"
-  }
-}));
+    colName: {
+      paddingLeft: 0,
+      width: "auto"
+    },
+    colNameLabel: {
+      marginLeft: AVATAR_MARGIN
+    },
+    colPublished: {
+      width: 150
+    },
+    colType: {
+      width: 200
+    },
+    table: {
+      tableLayout: "fixed"
+    },
+    tableRow: {
+      cursor: "pointer"
+    }
+  }),
+  { name: "DiscountProducts" }
+);
 
 const numberOfColumns = 5;
 
diff --git a/src/discounts/components/SaleList/SaleList.tsx b/src/discounts/components/SaleList/SaleList.tsx
index c3a31884e..c7712289e 100644
--- a/src/discounts/components/SaleList/SaleList.tsx
+++ b/src/discounts/components/SaleList/SaleList.tsx
@@ -24,35 +24,38 @@ export interface SaleListProps extends ListProps, ListActions {
   sales: SaleList_sales_edges_node[];
 }
 
-const useStyles = makeStyles(theme => ({
-  [theme.breakpoints.up("lg")]: {
-    colEnd: {
-      width: 250
+const useStyles = makeStyles(
+  theme => ({
+    [theme.breakpoints.up("lg")]: {
+      colEnd: {
+        width: 250
+      },
+      colName: {},
+      colStart: {
+        width: 250
+      },
+      colValue: {
+        width: 200
+      }
+    },
+    colEnd: {
+      textAlign: "right"
+    },
+    colName: {
+      paddingLeft: 0
     },
-    colName: {},
     colStart: {
-      width: 250
+      textAlign: "right"
     },
     colValue: {
-      width: 200
+      textAlign: "right"
+    },
+    tableRow: {
+      cursor: "pointer"
     }
-  },
-  colEnd: {
-    textAlign: "right"
-  },
-  colName: {
-    paddingLeft: 0
-  },
-  colStart: {
-    textAlign: "right"
-  },
-  colValue: {
-    textAlign: "right"
-  },
-  tableRow: {
-    cursor: "pointer"
-  }
-}));
+  }),
+  { name: "SaleList" }
+);
 
 const numberOfColumns = 5;
 
diff --git a/src/discounts/components/VoucherList/VoucherList.tsx b/src/discounts/components/VoucherList/VoucherList.tsx
index 83e2e4382..c573f1c3c 100644
--- a/src/discounts/components/VoucherList/VoucherList.tsx
+++ b/src/discounts/components/VoucherList/VoucherList.tsx
@@ -24,50 +24,53 @@ export interface VoucherListProps extends ListProps, ListActions {
   vouchers: VoucherList_vouchers_edges_node[];
 }
 
-const useStyles = makeStyles(theme => ({
-  [theme.breakpoints.up("lg")]: {
+const useStyles = makeStyles(
+  theme => ({
+    [theme.breakpoints.up("lg")]: {
+      colEnd: {
+        width: 180
+      },
+      colMinSpent: {
+        width: 150
+      },
+      colName: {},
+      colStart: {
+        width: 180
+      },
+      colUses: {
+        width: 150
+      },
+      colValue: {
+        width: 150
+      }
+    },
     colEnd: {
-      width: 180
+      textAlign: "right"
     },
     colMinSpent: {
-      width: 150
+      textAlign: "right"
+    },
+    colName: {
+      paddingLeft: 0
     },
-    colName: {},
     colStart: {
-      width: 180
+      textAlign: "right"
     },
     colUses: {
-      width: 150
+      textAlign: "right"
     },
     colValue: {
-      width: 150
+      textAlign: "right"
+    },
+    tableRow: {
+      cursor: "pointer"
+    },
+    textRight: {
+      textAlign: "right"
     }
-  },
-  colEnd: {
-    textAlign: "right"
-  },
-  colMinSpent: {
-    textAlign: "right"
-  },
-  colName: {
-    paddingLeft: 0
-  },
-  colStart: {
-    textAlign: "right"
-  },
-  colUses: {
-    textAlign: "right"
-  },
-  colValue: {
-    textAlign: "right"
-  },
-  tableRow: {
-    cursor: "pointer"
-  },
-  textRight: {
-    textAlign: "right"
-  }
-}));
+  }),
+  { name: "VoucherList" }
+);
 
 const numberOfColumns = 7;
 
diff --git a/src/home/components/HomeActivityCard/HomeActivityCard.tsx b/src/home/components/HomeActivityCard/HomeActivityCard.tsx
index e58b89faa..e8f3060a2 100644
--- a/src/home/components/HomeActivityCard/HomeActivityCard.tsx
+++ b/src/home/components/HomeActivityCard/HomeActivityCard.tsx
@@ -14,16 +14,19 @@ import { renderCollection } from "../../../misc";
 import { Home_activities_edges_node } from "../../types/Home";
 import { getActivityMessage } from "./activityMessages";
 
-const useStyles = makeStyles({
-  loadingProducts: {
-    paddingBottom: "10px",
-    paddingTop: "10px"
+const useStyles = makeStyles(
+  {
+    loadingProducts: {
+      paddingBottom: "10px",
+      paddingTop: "10px"
+    },
+    noProducts: {
+      paddingBottom: "16px",
+      paddingTop: "16px"
+    }
   },
-  noProducts: {
-    paddingBottom: "16px",
-    paddingTop: "16px"
-  }
-});
+  { name: "HomeActivityCard" }
+);
 
 interface HomeActivityCardProps {
   activities: Home_activities_edges_node[];
diff --git a/src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.tsx b/src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.tsx
index be53ce9e1..9bc5b6629 100644
--- a/src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.tsx
+++ b/src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.tsx
@@ -6,48 +6,51 @@ import Typography from "@material-ui/core/Typography";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
-const useStyles = makeStyles(theme => ({
-  cardContent: {
-    "&:last-child": {
-      padding: theme.spacing(2, 3)
+const useStyles = makeStyles(
+  theme => ({
+    cardContent: {
+      "&:last-child": {
+        padding: theme.spacing(2, 3)
+      },
+      display: "grid",
+      gridColumnGap: theme.spacing(3),
+      gridTemplateColumns: "1fr 64px"
     },
-    display: "grid",
-    gridColumnGap: theme.spacing(3),
-    gridTemplateColumns: "1fr 64px"
-  },
-  cardSpacing: {
-    [theme.breakpoints.down("sm")]: {
-      marginBottom: theme.spacing(1)
+    cardSpacing: {
+      [theme.breakpoints.down("sm")]: {
+        marginBottom: theme.spacing(1)
+      },
+      marginBottom: theme.spacing(3)
     },
-    marginBottom: theme.spacing(3)
-  },
-  cardSubtitle: {
-    fontSize: 12,
-    height: "20px",
-    lineHeight: 0.9
-  },
-  cardTitle: {
-    fontSize: 20,
-    fontWeight: 500 as 500
-  },
-  icon: {
-    color: theme.palette.primary.contrastText,
-    fontSize: 54,
-    margin: ".5rem .3rem"
-  },
-  iconBackground: {
-    backgroundColor: theme.palette.background.default,
-    borderRadius: "8px",
-    color: "white",
-    fontSize: "54px",
-    height: "100%",
-    padding: "10px 5px 0px 5px",
-    width: "100%"
-  },
-  value: {
-    textAlign: "right"
-  }
-}));
+    cardSubtitle: {
+      fontSize: 12,
+      height: "20px",
+      lineHeight: 0.9
+    },
+    cardTitle: {
+      fontSize: 20,
+      fontWeight: 500 as 500
+    },
+    icon: {
+      color: theme.palette.primary.contrastText,
+      fontSize: 54,
+      margin: ".5rem .3rem"
+    },
+    iconBackground: {
+      backgroundColor: theme.palette.background.default,
+      borderRadius: "8px",
+      color: "white",
+      fontSize: "54px",
+      height: "100%",
+      padding: "10px 5px 0px 5px",
+      width: "100%"
+    },
+    value: {
+      textAlign: "right"
+    }
+  }),
+  { name: "HomeAnalyticsCard" }
+);
 
 interface HomeAnalyticsCardProps {
   icon: React.ReactElement<IconProps>;
diff --git a/src/home/components/HomeHeader/HomeHeader.tsx b/src/home/components/HomeHeader/HomeHeader.tsx
index fb61e5a77..df541359b 100644
--- a/src/home/components/HomeHeader/HomeHeader.tsx
+++ b/src/home/components/HomeHeader/HomeHeader.tsx
@@ -5,17 +5,20 @@ import { FormattedMessage } from "react-intl";
 
 import Skeleton from "@saleor/components/Skeleton";
 
-const useStyles = makeStyles(theme => ({
-  headerContainer: {
-    marginBottom: theme.spacing(3)
-  },
-  pageHeader: {
-    fontWeight: 600 as 600
-  },
-  subtitle: {
-    color: theme.typography.caption.color
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    headerContainer: {
+      marginBottom: theme.spacing(3)
+    },
+    pageHeader: {
+      fontWeight: 600 as 600
+    },
+    subtitle: {
+      color: theme.typography.caption.color
+    }
+  }),
+  { name: "HomeHeader" }
+);
 
 interface HomeOrdersCardProps {
   userName: string;
diff --git a/src/home/components/HomeNotificationTable/HomeNotificationTable.tsx b/src/home/components/HomeNotificationTable/HomeNotificationTable.tsx
index a7318cb5b..9531611ad 100644
--- a/src/home/components/HomeNotificationTable/HomeNotificationTable.tsx
+++ b/src/home/components/HomeNotificationTable/HomeNotificationTable.tsx
@@ -14,14 +14,17 @@ import Skeleton from "@saleor/components/Skeleton";
 import { UserPermissionProps } from "@saleor/types";
 import { PermissionEnum } from "@saleor/types/globalTypes";
 
-const useStyles = makeStyles(theme => ({
-  arrowIcon: {
-    width: theme.spacing(4)
-  },
-  tableRow: {
-    cursor: "pointer"
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    arrowIcon: {
+      width: theme.spacing(4)
+    },
+    tableRow: {
+      cursor: "pointer"
+    }
+  }),
+  { name: "HomeNotificationTable" }
+);
 
 interface HomeNotificationTableProps extends UserPermissionProps {
   ordersToCapture: number;
diff --git a/src/home/components/HomePage/HomePage.tsx b/src/home/components/HomePage/HomePage.tsx
index 916ec647f..ff0dd069a 100644
--- a/src/home/components/HomePage/HomePage.tsx
+++ b/src/home/components/HomePage/HomePage.tsx
@@ -22,19 +22,22 @@ import HomeHeader from "../HomeHeader";
 import HomeNotificationTable from "../HomeNotificationTable/HomeNotificationTable";
 import HomeProductListCard from "../HomeProductListCard";
 
-const useStyles = makeStyles(theme => ({
-  cardContainer: {
-    display: "grid",
-    gridColumnGap: theme.spacing(3),
-    gridTemplateColumns: "1fr 1fr",
-    [theme.breakpoints.down("sm")]: {
-      gridColumnGap: theme.spacing(1)
-    },
-    [theme.breakpoints.down("xs")]: {
-      gridTemplateColumns: "1fr"
+const useStyles = makeStyles(
+  theme => ({
+    cardContainer: {
+      display: "grid",
+      gridColumnGap: theme.spacing(3),
+      gridTemplateColumns: "1fr 1fr",
+      [theme.breakpoints.down("sm")]: {
+        gridColumnGap: theme.spacing(1)
+      },
+      [theme.breakpoints.down("xs")]: {
+        gridTemplateColumns: "1fr"
+      }
     }
-  }
-}));
+  }),
+  { name: "HomePage" }
+);
 
 export interface HomePageProps extends UserPermissionProps {
   activities: Home_activities_edges_node[];
diff --git a/src/home/components/HomeProductListCard/HomeProductListCard.tsx b/src/home/components/HomeProductListCard/HomeProductListCard.tsx
index 2854c922d..1fe4094c5 100644
--- a/src/home/components/HomeProductListCard/HomeProductListCard.tsx
+++ b/src/home/components/HomeProductListCard/HomeProductListCard.tsx
@@ -16,27 +16,30 @@ import TableCellAvatar from "@saleor/components/TableCellAvatar";
 import { maybe, renderCollection } from "../../../misc";
 import { Home_productTopToday_edges_node } from "../../types/Home";
 
-const useStyles = makeStyles(theme => ({
-  avatarProps: {
-    height: 64,
-    width: 64
-  },
-  avatarSpacing: {
-    paddingBottom: theme.spacing(2),
-    paddingRight: theme.spacing(),
-    paddingTop: theme.spacing(2)
-  },
-  label: {
-    paddingLeft: 0
-  },
-  noProducts: {
-    paddingBottom: 20,
-    paddingTop: 20
-  },
-  tableRow: {
-    cursor: "pointer"
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    avatarProps: {
+      height: 64,
+      width: 64
+    },
+    avatarSpacing: {
+      paddingBottom: theme.spacing(2),
+      paddingRight: theme.spacing(),
+      paddingTop: theme.spacing(2)
+    },
+    label: {
+      paddingLeft: 0
+    },
+    noProducts: {
+      paddingBottom: 20,
+      paddingTop: 20
+    },
+    tableRow: {
+      cursor: "pointer"
+    }
+  }),
+  { name: "HomeProductListCard" }
+);
 
 interface HomeProductListProps {
   topProducts: Home_productTopToday_edges_node[];
diff --git a/src/navigation/components/MenuItems/MenuItems.tsx b/src/navigation/components/MenuItems/MenuItems.tsx
index a02954aa8..554e71173 100644
--- a/src/navigation/components/MenuItems/MenuItems.tsx
+++ b/src/navigation/components/MenuItems/MenuItems.tsx
@@ -34,82 +34,85 @@ export interface MenuItemsProps {
   onUndo: () => void;
 }
 
-const useStyles = makeStyles(theme => ({
-  actions: {
-    flexDirection: "row"
-  },
-  container: {
-    background: theme.palette.grey[200]
-  },
-  darkContainer: {
-    background: `${theme.palette.grey[800]} !important`
-  },
-  deleteButton: {
-    marginRight: theme.spacing(1)
-  },
-  dragIcon: {
-    cursor: "grab"
-  },
-  nodeTitle: {
-    cursor: "pointer",
-    marginLeft: theme.spacing(7)
-  },
-  root: {
-    "& .rst__collapseButton": {
-      display: "none"
+const useStyles = makeStyles(
+  theme => ({
+    actions: {
+      flexDirection: "row"
     },
-    "& .rst__node": {
-      "&:first-of-type": {
-        "& $row": {
-          borderTop: `1px ${theme.palette.divider} solid`
+    container: {
+      background: theme.palette.grey[200]
+    },
+    darkContainer: {
+      background: `${theme.palette.grey[800]} !important`
+    },
+    deleteButton: {
+      marginRight: theme.spacing(1)
+    },
+    dragIcon: {
+      cursor: "grab"
+    },
+    nodeTitle: {
+      cursor: "pointer",
+      marginLeft: theme.spacing(7)
+    },
+    root: {
+      "& .rst__collapseButton": {
+        display: "none"
+      },
+      "& .rst__node": {
+        "&:first-of-type": {
+          "& $row": {
+            borderTop: `1px ${theme.palette.divider} solid`
+          }
         }
       }
-    }
-  },
-  row: {
-    alignItems: "center",
-    background: theme.palette.background.paper,
-    borderBottom: `1px ${theme.palette.divider} solid`,
-    borderRadius: 0,
-    display: "flex",
-    flexDirection: "row",
-    height: NODE_HEIGHT,
-    justifyContent: "flex-start",
-    paddingLeft: theme.spacing(3)
-  },
-  rowContainer: {
-    "& > *": {
-      opacity: 1,
-      transition: `opacity ${theme.transitions.duration.standard}ms`
     },
-    transition: `margin ${theme.transitions.duration.standard}ms`
-  },
-  rowContainerDragged: {
-    "&$rowContainer": {
-      "&:before": {
-        background: theme.palette.background.paper,
-        border: `1px solid ${theme.palette.primary.main}`,
-        borderRadius: "100%",
-        content: "''",
-        height: 7,
-        left: 0,
-        position: "absolute",
-        top: -3,
-        width: 7
+    row: {
+      alignItems: "center",
+      background: theme.palette.background.paper,
+      borderBottom: `1px ${theme.palette.divider} solid`,
+      borderRadius: 0,
+      display: "flex",
+      flexDirection: "row",
+      height: NODE_HEIGHT,
+      justifyContent: "flex-start",
+      paddingLeft: theme.spacing(3)
+    },
+    rowContainer: {
+      "& > *": {
+        opacity: 1,
+        transition: `opacity ${theme.transitions.duration.standard}ms`
       },
-      borderTop: `1px solid ${theme.palette.primary.main}`,
-      height: 0,
-      position: "relative",
-      top: -1
+      transition: `margin ${theme.transitions.duration.standard}ms`
+    },
+    rowContainerDragged: {
+      "&$rowContainer": {
+        "&:before": {
+          background: theme.palette.background.paper,
+          border: `1px solid ${theme.palette.primary.main}`,
+          borderRadius: "100%",
+          content: "''",
+          height: 7,
+          left: 0,
+          position: "absolute",
+          top: -3,
+          width: 7
+        },
+        borderTop: `1px solid ${theme.palette.primary.main}`,
+        height: 0,
+        position: "relative",
+        top: -1
+      }
+    },
+    rowContainerPlaceholder: {
+      opacity: 0
+    },
+    spacer: {
+      flex: 1
     }
-  },
-  rowContainerPlaceholder: {
-    opacity: 0
-  },
-  spacer: {
-    flex: 1
-  }
-}));
+  }),
+  { name: "MenuItems" }
+);
 
 const Placeholder: React.FC = props => {
   const classes = useStyles(props);
diff --git a/src/navigation/components/MenuList/MenuList.tsx b/src/navigation/components/MenuList/MenuList.tsx
index e5bb1343c..7ef30cd5f 100644
--- a/src/navigation/components/MenuList/MenuList.tsx
+++ b/src/navigation/components/MenuList/MenuList.tsx
@@ -23,23 +23,26 @@ export interface MenuListProps extends ListProps, ListActions {
   onDelete: (id: string) => void;
 }
 
-const useStyles = makeStyles(theme => ({
-  [theme.breakpoints.up("lg")]: {
-    colItems: {
-      width: 200
+const useStyles = makeStyles(
+  theme => ({
+    [theme.breakpoints.up("lg")]: {
+      colItems: {
+        width: 200
+      },
+      colTitle: {}
     },
-    colTitle: {}
-  },
-  colItems: {
-    textAlign: "right"
-  },
-  colTitle: {
-    paddingLeft: 0
-  },
-  row: {
-    cursor: "pointer"
-  }
-}));
+    colItems: {
+      textAlign: "right"
+    },
+    colTitle: {
+      paddingLeft: 0
+    },
+    row: {
+      cursor: "pointer"
+    }
+  }),
+  { name: "MenuList" }
+);
 
 const numberOfColumns = 4;
 
diff --git a/src/orders/components/OrderAddressEditDialog/OrderAddressEditDialog.tsx b/src/orders/components/OrderAddressEditDialog/OrderAddressEditDialog.tsx
index 2acf37594..7e6b861f3 100644
--- a/src/orders/components/OrderAddressEditDialog/OrderAddressEditDialog.tsx
+++ b/src/orders/components/OrderAddressEditDialog/OrderAddressEditDialog.tsx
@@ -22,11 +22,14 @@ import { UserError } from "@saleor/types";
 import { AddressInput } from "@saleor/types/globalTypes";
 import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
 
-const useStyles = makeStyles({
-  overflow: {
-    overflowY: "visible"
-  }
-});
+const useStyles = makeStyles(
+  {
+    overflow: {
+      overflowY: "visible"
+    }
+  },
+  { name: "OrderAddressEditDialog" }
+);
 
 interface OrderAddressEditDialogProps {
   confirmButtonState: ConfirmButtonTransitionState;
diff --git a/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx b/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx
index 2ace728db..8304a8953 100644
--- a/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx
+++ b/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx
@@ -19,15 +19,18 @@ export interface FormData {
   restock: boolean;
 }
 
-const useStyles = makeStyles(theme => ({
-  deleteButton: {
-    "&:hover": {
-      backgroundColor: theme.palette.error.main
-    },
-    backgroundColor: theme.palette.error.main,
-    color: theme.palette.error.contrastText
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    deleteButton: {
+      "&:hover": {
+        backgroundColor: theme.palette.error.main
+      },
+      backgroundColor: theme.palette.error.main,
+      color: theme.palette.error.contrastText
+    }
+  }),
+  { name: "OrderCancelDialog" }
+);
 
 interface OrderCancelDialogProps {
   confirmButtonState: ConfirmButtonTransitionState;
diff --git a/src/orders/components/OrderCustomer/OrderCustomer.tsx b/src/orders/components/OrderCustomer/OrderCustomer.tsx
index 59782696c..999170f0c 100644
--- a/src/orders/components/OrderCustomer/OrderCustomer.tsx
+++ b/src/orders/components/OrderCustomer/OrderCustomer.tsx
@@ -24,26 +24,29 @@ import { customerUrl } from "../../../customers/urls";
 import { createHref, maybe } from "../../../misc";
 import { OrderDetails_order } from "../../types/OrderDetails";
 
-const useStyles = makeStyles(theme => ({
-  sectionHeader: {
-    alignItems: "center",
-    display: "flex",
-    marginBottom: theme.spacing(3)
-  },
-  sectionHeaderTitle: {
-    flex: 1,
-    fontWeight: 600 as 600,
-    lineHeight: 1,
-    textTransform: "uppercase"
-  },
-  sectionHeaderToolbar: {
-    marginRight: -theme.spacing(2)
-  },
-  userEmail: {
-    fontWeight: 600 as 600,
-    marginBottom: theme.spacing(1)
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    sectionHeader: {
+      alignItems: "center",
+      display: "flex",
+      marginBottom: theme.spacing(3)
+    },
+    sectionHeaderTitle: {
+      flex: 1,
+      fontWeight: 600 as 600,
+      lineHeight: 1,
+      textTransform: "uppercase"
+    },
+    sectionHeaderToolbar: {
+      marginRight: -theme.spacing(2)
+    },
+    userEmail: {
+      fontWeight: 600 as 600,
+      marginBottom: theme.spacing(1)
+    }
+  }),
+  { name: "OrderCustomer" }
+);
 
 export interface OrderCustomerProps
   extends Partial<FetchMoreProps>,
diff --git a/src/orders/components/OrderDraftDetailsProducts/OrderDraftDetailsProducts.tsx b/src/orders/components/OrderDraftDetailsProducts/OrderDraftDetailsProducts.tsx
index cde3c7bf9..c1e2af9de 100644
--- a/src/orders/components/OrderDraftDetailsProducts/OrderDraftDetailsProducts.tsx
+++ b/src/orders/components/OrderDraftDetailsProducts/OrderDraftDetailsProducts.tsx
@@ -25,42 +25,45 @@ export interface FormData {
   quantity: number;
 }
 
-const useStyles = makeStyles(theme => ({
-  colAction: {
-    "&:last-child": {
-      paddingRight: 0
+const useStyles = makeStyles(
+  theme => ({
+    colAction: {
+      "&:last-child": {
+        paddingRight: 0
+      },
+      width: 76 + theme.spacing(0.5)
     },
-    width: 76 + theme.spacing(0.5)
-  },
-  colName: {
-    width: "auto"
-  },
-  colNameLabel: {
-    marginLeft: AVATAR_MARGIN
-  },
-  colPrice: {
-    textAlign: "right",
-    width: 150
-  },
-  colQuantity: {
-    textAlign: "right",
-    width: 80
-  },
-  colTotal: {
-    textAlign: "right",
-    width: 150
-  },
-  quantityField: {
-    "& input": {
-      padding: "12px 12px 10px",
-      textAlign: "right"
+    colName: {
+      width: "auto"
     },
-    width: 60
-  },
-  table: {
-    tableLayout: "fixed"
-  }
-}));
+    colNameLabel: {
+      marginLeft: AVATAR_MARGIN
+    },
+    colPrice: {
+      textAlign: "right",
+      width: 150
+    },
+    colQuantity: {
+      textAlign: "right",
+      width: 80
+    },
+    colTotal: {
+      textAlign: "right",
+      width: 150
+    },
+    quantityField: {
+      "& input": {
+        padding: "12px 12px 10px",
+        textAlign: "right"
+      },
+      width: 60
+    },
+    table: {
+      tableLayout: "fixed"
+    }
+  }),
+  { name: "OrderDraftDetailsProducts" }
+);
 
 interface OrderDraftDetailsProductsProps {
   lines: OrderDetails_order_lines[];
diff --git a/src/orders/components/OrderDraftDetailsSummary/OrderDraftDetailsSummary.tsx b/src/orders/components/OrderDraftDetailsSummary/OrderDraftDetailsSummary.tsx
index ab9a50f7c..93d463280 100644
--- a/src/orders/components/OrderDraftDetailsSummary/OrderDraftDetailsSummary.tsx
+++ b/src/orders/components/OrderDraftDetailsSummary/OrderDraftDetailsSummary.tsx
@@ -8,16 +8,19 @@ import Skeleton from "@saleor/components/Skeleton";
 import { maybe } from "../../../misc";
 import { OrderDetails_order } from "../../types/OrderDetails";
 
-const useStyles = makeStyles(theme => ({
-  root: {
-    ...theme.typography.body1,
-    lineHeight: 1.9,
-    width: "100%"
-  },
-  textRight: {
-    textAlign: "right"
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    root: {
+      ...theme.typography.body1,
+      lineHeight: 1.9,
+      width: "100%"
+    },
+    textRight: {
+      textAlign: "right"
+    }
+  }),
+  { name: "OrderDraftDetailsSummary" }
+);
 
 interface OrderDraftDetailsSummaryProps {
   order: OrderDetails_order;
diff --git a/src/orders/components/OrderDraftList/OrderDraftList.tsx b/src/orders/components/OrderDraftList/OrderDraftList.tsx
index 6e7cb3add..3e50d964d 100644
--- a/src/orders/components/OrderDraftList/OrderDraftList.tsx
+++ b/src/orders/components/OrderDraftList/OrderDraftList.tsx
@@ -22,31 +22,34 @@ import {
 import { ListActions, ListProps } from "@saleor/types";
 import { OrderDraftList_draftOrders_edges_node } from "../../types/OrderDraftList";
 
-const useStyles = makeStyles(theme => ({
-  [theme.breakpoints.up("lg")]: {
-    colCustomer: {
-      width: 300
-    },
-    colDate: {
-      width: 300
+const useStyles = makeStyles(
+  theme => ({
+    [theme.breakpoints.up("lg")]: {
+      colCustomer: {
+        width: 300
+      },
+      colDate: {
+        width: 300
+      },
+      colNumber: {
+        width: 120
+      },
+      colTotal: {}
     },
+    colCustomer: {},
+    colDate: {},
     colNumber: {
-      width: 120
+      paddingLeft: 0
     },
-    colTotal: {}
-  },
-  colCustomer: {},
-  colDate: {},
-  colNumber: {
-    paddingLeft: 0
-  },
-  colTotal: {
-    textAlign: "right"
-  },
-  link: {
-    cursor: "pointer"
-  }
-}));
+    colTotal: {
+      textAlign: "right"
+    },
+    link: {
+      cursor: "pointer"
+    }
+  }),
+  { name: "OrderDraftList" }
+);
 
 interface OrderDraftListProps extends ListProps, ListActions {
   orders: OrderDraftList_draftOrders_edges_node[];
diff --git a/src/orders/components/OrderDraftPage/OrderDraftPage.tsx b/src/orders/components/OrderDraftPage/OrderDraftPage.tsx
index d36642b84..2a4de7342 100644
--- a/src/orders/components/OrderDraftPage/OrderDraftPage.tsx
+++ b/src/orders/components/OrderDraftPage/OrderDraftPage.tsx
@@ -23,15 +23,18 @@ import OrderDraftDetails from "../OrderDraftDetails/OrderDraftDetails";
 import { FormData as OrderDraftDetailsProductsFormData } from "../OrderDraftDetailsProducts";
 import OrderHistory, { FormData as HistoryFormData } from "../OrderHistory";
 
-const useStyles = makeStyles(theme => ({
-  date: {
-    marginBottom: theme.spacing(3)
-  },
-  header: {
-    display: "flex",
-    marginBottom: 0
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    date: {
+      marginBottom: theme.spacing(3)
+    },
+    header: {
+      display: "flex",
+      marginBottom: 0
+    }
+  }),
+  { name: "OrderDraftPage" }
+);
 
 export interface OrderDraftPageProps
   extends FetchMoreProps,
diff --git a/src/orders/components/OrderFulfillment/OrderFulfillment.tsx b/src/orders/components/OrderFulfillment/OrderFulfillment.tsx
index c3399ee1f..2a43cd0c7 100644
--- a/src/orders/components/OrderFulfillment/OrderFulfillment.tsx
+++ b/src/orders/components/OrderFulfillment/OrderFulfillment.tsx
@@ -23,40 +23,43 @@ import { maybe, renderCollection } from "../../../misc";
 import { FulfillmentStatus } from "../../../types/globalTypes";
 import { OrderDetails_order_fulfillments } from "../../types/OrderDetails";
 
-const useStyles = makeStyles(theme => ({
-  clickableRow: {
-    cursor: "pointer"
-  },
-  colName: {
-    width: "auto"
-  },
-  colNameLabel: {
-    marginLeft: AVATAR_MARGIN
-  },
-  colPrice: {
-    textAlign: "right",
-    width: 120
-  },
-  colQuantity: {
-    textAlign: "center",
-    width: 120
-  },
-  colTotal: {
-    textAlign: "right",
-    width: 120
-  },
+const useStyles = makeStyles(
+  theme => ({
+    clickableRow: {
+      cursor: "pointer"
+    },
+    colName: {
+      width: "auto"
+    },
+    colNameLabel: {
+      marginLeft: AVATAR_MARGIN
+    },
+    colPrice: {
+      textAlign: "right",
+      width: 120
+    },
+    colQuantity: {
+      textAlign: "center",
+      width: 120
+    },
+    colTotal: {
+      textAlign: "right",
+      width: 120
+    },
 
-  orderNumber: {
-    display: "inline",
-    marginLeft: theme.spacing(1)
-  },
-  statusBar: {
-    paddingTop: 0
-  },
-  table: {
-    tableLayout: "fixed"
-  }
-}));
+    orderNumber: {
+      display: "inline",
+      marginLeft: theme.spacing(1)
+    },
+    statusBar: {
+      paddingTop: 0
+    },
+    table: {
+      tableLayout: "fixed"
+    }
+  }),
+  { name: "OrderFulfillment" }
+);
 
 interface OrderFulfillmentProps {
   fulfillment: OrderDetails_order_fulfillments;
diff --git a/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx b/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx
index 8272eb8e4..8afda902a 100644
--- a/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx
+++ b/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx
@@ -19,15 +19,18 @@ export interface FormData {
   restock: boolean;
 }
 
-const useStyles = makeStyles(theme => ({
-  deleteButton: {
-    "&:hover": {
-      backgroundColor: theme.palette.error.main
-    },
-    backgroundColor: theme.palette.error.main,
-    color: theme.palette.error.contrastText
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    deleteButton: {
+      "&:hover": {
+        backgroundColor: theme.palette.error.main
+      },
+      backgroundColor: theme.palette.error.main,
+      color: theme.palette.error.contrastText
+    }
+  }),
+  { name: "OrderFulfillmentCancelDialog" }
+);
 
 interface OrderFulfillmentCancelDialogProps {
   confirmButtonState: ConfirmButtonTransitionState;
diff --git a/src/orders/components/OrderFulfillmentDialog/OrderFulfillmentDialog.tsx b/src/orders/components/OrderFulfillmentDialog/OrderFulfillmentDialog.tsx
index 31b6f1f41..22336c59b 100644
--- a/src/orders/components/OrderFulfillmentDialog/OrderFulfillmentDialog.tsx
+++ b/src/orders/components/OrderFulfillmentDialog/OrderFulfillmentDialog.tsx
@@ -30,35 +30,38 @@ export interface FormData {
   trackingNumber: string;
 }
 
-const useStyles = makeStyles(theme => ({
-  colName: {
-    width: "auto"
-  },
-  colNameLabel: {
-    marginLeft: AVATAR_MARGIN
-  },
-  colQuantity: {
-    textAlign: "right",
-    width: 150
-  },
-  colQuantityContent: {
-    alignItems: "center",
-    display: "inline-flex"
-  },
-  colSku: {
-    width: 120
-  },
-  quantityInput: {
-    width: "4rem"
-  },
-  remainingQuantity: {
-    marginLeft: theme.spacing(),
-    paddingTop: 14
-  },
-  table: {
-    tableLayout: "fixed"
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    colName: {
+      width: "auto"
+    },
+    colNameLabel: {
+      marginLeft: AVATAR_MARGIN
+    },
+    colQuantity: {
+      textAlign: "right",
+      width: 150
+    },
+    colQuantityContent: {
+      alignItems: "center",
+      display: "inline-flex"
+    },
+    colSku: {
+      width: 120
+    },
+    quantityInput: {
+      width: "4rem"
+    },
+    remainingQuantity: {
+      marginLeft: theme.spacing(),
+      paddingTop: 14
+    },
+    table: {
+      tableLayout: "fixed"
+    }
+  }),
+  { name: "OrderFulfillmentDialog" }
+);
 
 export interface OrderFulfillmentDialogProps {
   confirmButtonState: ConfirmButtonTransitionState;
diff --git a/src/orders/components/OrderHistory/OrderHistory.tsx b/src/orders/components/OrderHistory/OrderHistory.tsx
index d33d4eab4..8c1e84fcc 100644
--- a/src/orders/components/OrderHistory/OrderHistory.tsx
+++ b/src/orders/components/OrderHistory/OrderHistory.tsx
@@ -172,16 +172,19 @@ const getEventMessage = (event: OrderDetails_order_events, intl: IntlShape) => {
   }
 };
 
-const useStyles = makeStyles(theme => ({
-  header: {
-    fontWeight: 500,
-    marginBottom: theme.spacing(1)
-  },
-  root: { marginTop: theme.spacing(4) },
-  user: {
-    marginBottom: theme.spacing(1)
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    header: {
+      fontWeight: 500,
+      marginBottom: theme.spacing(1)
+    },
+    root: { marginTop: theme.spacing(4) },
+    user: {
+      marginBottom: theme.spacing(1)
+    }
+  }),
+  { name: "OrderHistory" }
+);
 
 interface OrderHistoryProps {
   history: OrderDetails_order_events[];
diff --git a/src/orders/components/OrderList/OrderList.tsx b/src/orders/components/OrderList/OrderList.tsx
index a77fd55eb..4f978352d 100644
--- a/src/orders/components/OrderList/OrderList.tsx
+++ b/src/orders/components/OrderList/OrderList.tsx
@@ -23,35 +23,38 @@ import {
 import { ListActions, ListProps } from "@saleor/types";
 import { OrderList_orders_edges_node } from "../../types/OrderList";
 
-const useStyles = makeStyles(theme => ({
-  [theme.breakpoints.up("lg")]: {
-    colCustomer: {
-      width: 220
+const useStyles = makeStyles(
+  theme => ({
+    [theme.breakpoints.up("lg")]: {
+      colCustomer: {
+        width: 220
+      },
+      colDate: {},
+      colFulfillment: {
+        width: 230
+      },
+      colNumber: {
+        width: 120
+      },
+      colPayment: {
+        width: 220
+      },
+      colTotal: {}
     },
+    colCustomer: {},
     colDate: {},
-    colFulfillment: {
-      width: 230
+    colFulfillment: {},
+    colNumber: {},
+    colPayment: {},
+    colTotal: {
+      textAlign: "right"
     },
-    colNumber: {
-      width: 120
-    },
-    colPayment: {
-      width: 220
-    },
-    colTotal: {}
-  },
-  colCustomer: {},
-  colDate: {},
-  colFulfillment: {},
-  colNumber: {},
-  colPayment: {},
-  colTotal: {
-    textAlign: "right"
-  },
-  link: {
-    cursor: "pointer"
-  }
-}));
+    link: {
+      cursor: "pointer"
+    }
+  }),
+  { name: "OrderList" }
+);
 
 interface OrderListProps extends ListProps, ListActions {
   orders: OrderList_orders_edges_node[];
diff --git a/src/orders/components/OrderPayment/OrderPayment.tsx b/src/orders/components/OrderPayment/OrderPayment.tsx
index e8b020c4a..9f6fc639f 100644
--- a/src/orders/components/OrderPayment/OrderPayment.tsx
+++ b/src/orders/components/OrderPayment/OrderPayment.tsx
@@ -15,19 +15,22 @@ import { maybe, transformPaymentStatus } from "../../../misc";
 import { OrderAction, OrderStatus } from "../../../types/globalTypes";
 import { OrderDetails_order } from "../../types/OrderDetails";
 
-const useStyles = makeStyles(theme => ({
-  root: {
-    ...theme.typography.body1,
-    lineHeight: 1.9,
-    width: "100%"
-  },
-  textRight: {
-    textAlign: "right"
-  },
-  totalRow: {
-    fontWeight: 600
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    root: {
+      ...theme.typography.body1,
+      lineHeight: 1.9,
+      width: "100%"
+    },
+    textRight: {
+      textAlign: "right"
+    },
+    totalRow: {
+      fontWeight: 600
+    }
+  }),
+  { name: "OrderPayment" }
+);
 
 interface OrderPaymentProps {
   order: OrderDetails_order;
diff --git a/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx b/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx
index 2cb61b667..9310c89eb 100644
--- a/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx
+++ b/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx
@@ -29,48 +29,51 @@ import {
   SearchOrderVariant_search_edges_node_variants
 } from "../../types/SearchOrderVariant";
 
-const useStyles = makeStyles(theme => ({
-  avatar: {
-    paddingLeft: 0
-  },
-  colName: {
-    paddingLeft: 0
-  },
-  colVariantCheckbox: {
-    padding: 0
-  },
-  content: {
-    overflowY: "scroll"
-  },
-  grayText: {
-    color: theme.palette.text.disabled
-  },
-  loadMoreLoaderContainer: {
-    alignItems: "center",
-    display: "flex",
-    height: theme.spacing(3),
-    justifyContent: "center"
-  },
-  overflow: {
-    overflowY: "visible"
-  },
-  productCheckboxCell: {
-    "&:first-child": {
-      paddingLeft: 0,
-      paddingRight: 0
+const useStyles = makeStyles(
+  theme => ({
+    avatar: {
+      paddingLeft: 0
+    },
+    colName: {
+      paddingLeft: 0
+    },
+    colVariantCheckbox: {
+      padding: 0
+    },
+    content: {
+      overflowY: "scroll"
+    },
+    grayText: {
+      color: theme.palette.text.disabled
+    },
+    loadMoreLoaderContainer: {
+      alignItems: "center",
+      display: "flex",
+      height: theme.spacing(3),
+      justifyContent: "center"
+    },
+    overflow: {
+      overflowY: "visible"
+    },
+    productCheckboxCell: {
+      "&:first-child": {
+        paddingLeft: 0,
+        paddingRight: 0
+      }
+    },
+    textRight: {
+      textAlign: "right"
+    },
+    variantCheckbox: {
+      left: theme.spacing(),
+      position: "relative"
+    },
+    wideCell: {
+      width: "100%"
     }
-  },
-  textRight: {
-    textAlign: "right"
-  },
-  variantCheckbox: {
-    left: theme.spacing(),
-    position: "relative"
-  },
-  wideCell: {
-    width: "100%"
-  }
-}));
+  }),
+  { name: "OrderProductAddDialog" }
+);
 
 type SetVariantsAction = (
   data: SearchOrderVariant_search_edges_node_variants[]
diff --git a/src/orders/components/OrderShippingMethodEditDialog/OrderShippingMethodEditDialog.tsx b/src/orders/components/OrderShippingMethodEditDialog/OrderShippingMethodEditDialog.tsx
index 9c3960e84..93e86cb99 100644
--- a/src/orders/components/OrderShippingMethodEditDialog/OrderShippingMethodEditDialog.tsx
+++ b/src/orders/components/OrderShippingMethodEditDialog/OrderShippingMethodEditDialog.tsx
@@ -20,27 +20,30 @@ export interface FormData {
   shippingMethod: string;
 }
 
-const useStyles = makeStyles(theme => ({
-  dialog: {
-    overflowY: "visible"
-  },
-  menuItem: {
-    display: "flex",
-    width: "100%"
-  },
-  price: {
-    marginRight: theme.spacing(3)
-  },
-  root: {
-    overflowY: "visible",
-    width: theme.breakpoints.values.sm
-  },
-  shippingMethodName: {
-    flex: 1,
-    overflowX: "hidden",
-    textOverflow: "ellipsis"
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    dialog: {
+      overflowY: "visible"
+    },
+    menuItem: {
+      display: "flex",
+      width: "100%"
+    },
+    price: {
+      marginRight: theme.spacing(3)
+    },
+    root: {
+      overflowY: "visible",
+      width: theme.breakpoints.values.sm
+    },
+    shippingMethodName: {
+      flex: 1,
+      overflowX: "hidden",
+      textOverflow: "ellipsis"
+    }
+  }),
+  { name: "OrderShippingMethodEditDialog" }
+);
 
 interface OrderShippingMethodEditDialogProps {
   confirmButtonState: ConfirmButtonTransitionState;
diff --git a/src/orders/components/OrderUnfulfilledItems/OrderUnfulfilledItems.tsx b/src/orders/components/OrderUnfulfilledItems/OrderUnfulfilledItems.tsx
index 340e61073..bd8b6ae5d 100644
--- a/src/orders/components/OrderUnfulfilledItems/OrderUnfulfilledItems.tsx
+++ b/src/orders/components/OrderUnfulfilledItems/OrderUnfulfilledItems.tsx
@@ -20,36 +20,39 @@ import TableCellAvatar, {
 import { maybe } from "../../../misc";
 import { OrderDetails_order_lines } from "../../types/OrderDetails";
 
-const useStyles = makeStyles({
-  clickableRow: {
-    cursor: "pointer"
+const useStyles = makeStyles(
+  {
+    clickableRow: {
+      cursor: "pointer"
+    },
+    colName: {
+      paddingLeft: 0,
+      width: "auto"
+    },
+    colNameLabel: {
+      marginLeft: AVATAR_MARGIN
+    },
+    colPrice: {
+      textAlign: "right",
+      width: 120
+    },
+    colQuantity: {
+      textAlign: "center",
+      width: 120
+    },
+    colTotal: {
+      textAlign: "right",
+      width: 120
+    },
+    statusBar: {
+      paddingTop: 0
+    },
+    table: {
+      tableLayout: "fixed"
+    }
   },
-  colName: {
-    paddingLeft: 0,
-    width: "auto"
-  },
-  colNameLabel: {
-    marginLeft: AVATAR_MARGIN
-  },
-  colPrice: {
-    textAlign: "right",
-    width: 120
-  },
-  colQuantity: {
-    textAlign: "center",
-    width: 120
-  },
-  colTotal: {
-    textAlign: "right",
-    width: 120
-  },
-  statusBar: {
-    paddingTop: 0
-  },
-  table: {
-    tableLayout: "fixed"
-  }
-});
+  { name: "OrderUnfulfilledItems" }
+);
 
 interface OrderUnfulfilledItemsProps {
   canFulfill: boolean;
diff --git a/src/pages/components/PageInfo/PageInfo.tsx b/src/pages/components/PageInfo/PageInfo.tsx
index a319d8f72..ed2883ae4 100644
--- a/src/pages/components/PageInfo/PageInfo.tsx
+++ b/src/pages/components/PageInfo/PageInfo.tsx
@@ -22,11 +22,14 @@ export interface PageInfoProps {
   onChange: (event: React.ChangeEvent<any>) => void;
 }
 
-const useStyles = makeStyles({
-  root: {
-    overflow: "visible"
-  }
-});
+const useStyles = makeStyles(
+  {
+    root: {
+      overflow: "visible"
+    }
+  },
+  { name: "PageInfo" }
+);
 
 const PageInfo: React.FC<PageInfoProps> = props => {
   const { data, disabled, errors, page, onChange } = props;
diff --git a/src/pages/components/PageList/PageList.tsx b/src/pages/components/PageList/PageList.tsx
index f2087a7e9..c8a245bcc 100644
--- a/src/pages/components/PageList/PageList.tsx
+++ b/src/pages/components/PageList/PageList.tsx
@@ -21,25 +21,28 @@ export interface PageListProps extends ListProps, ListActions {
   pages: PageList_pages_edges_node[];
 }
 
-const useStyles = makeStyles(theme => ({
-  [theme.breakpoints.up("lg")]: {
-    colSlug: {
-      width: 250
+const useStyles = makeStyles(
+  theme => ({
+    [theme.breakpoints.up("lg")]: {
+      colSlug: {
+        width: 250
+      },
+      colTitle: {},
+      colVisibility: {
+        width: 200
+      }
     },
-    colTitle: {},
-    colVisibility: {
-      width: 200
+    colSlug: {},
+    colTitle: {
+      paddingLeft: 0
+    },
+    colVisibility: {},
+    link: {
+      cursor: "pointer"
     }
-  },
-  colSlug: {},
-  colTitle: {
-    paddingLeft: 0
-  },
-  colVisibility: {},
-  link: {
-    cursor: "pointer"
-  }
-}));
+  }),
+  { name: "PageList" }
+);
 
 const numberOfColumns = 4;
 
diff --git a/src/plugins/components/PluginAuthorization/PluginAuthorization.tsx b/src/plugins/components/PluginAuthorization/PluginAuthorization.tsx
index a590141c3..3cd38de73 100644
--- a/src/plugins/components/PluginAuthorization/PluginAuthorization.tsx
+++ b/src/plugins/components/PluginAuthorization/PluginAuthorization.tsx
@@ -19,21 +19,24 @@ interface PluginAuthorizationProps {
   onEdit: (field: string) => void;
 }
 
-const useStyles = makeStyles(theme => ({
-  button: {
-    marginLeft: theme.spacing()
-  },
-  hr: {
-    margin: theme.spacing(2, 0)
-  },
-  item: {
-    alignItems: "center",
-    display: "flex"
-  },
-  spacer: {
-    flex: 1
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    button: {
+      marginLeft: theme.spacing()
+    },
+    hr: {
+      margin: theme.spacing(2, 0)
+    },
+    item: {
+      alignItems: "center",
+      display: "flex"
+    },
+    spacer: {
+      flex: 1
+    }
+  }),
+  { name: "PluginAuthorization" }
+);
 
 const PluginAuthorization: React.FC<PluginAuthorizationProps> = props => {
   const { fields, onClear, onEdit } = props;
diff --git a/src/plugins/components/PluginInfo/PluginInfo.tsx b/src/plugins/components/PluginInfo/PluginInfo.tsx
index 670786cd5..8a579701b 100644
--- a/src/plugins/components/PluginInfo/PluginInfo.tsx
+++ b/src/plugins/components/PluginInfo/PluginInfo.tsx
@@ -19,15 +19,18 @@ interface PluginInfoProps {
   onChange: (event: React.ChangeEvent<any>) => void;
 }
 
-const useStyles = makeStyles(() => ({
-  status: {
-    paddingTop: 20
-  },
-  title: {
-    fontSize: 14,
-    paddingTop: 10
-  }
-}));
+const useStyles = makeStyles(
+  () => ({
+    status: {
+      paddingTop: 20
+    },
+    title: {
+      fontSize: 14,
+      paddingTop: 10
+    }
+  }),
+  { name: "PluginInfo" }
+);
 
 const PluginInfo: React.FC<PluginInfoProps> = ({
   data,
diff --git a/src/plugins/components/PluginSettings/PluginSettings.tsx b/src/plugins/components/PluginSettings/PluginSettings.tsx
index d01110b93..56d1d9549 100644
--- a/src/plugins/components/PluginSettings/PluginSettings.tsx
+++ b/src/plugins/components/PluginSettings/PluginSettings.tsx
@@ -20,25 +20,28 @@ interface PluginSettingsProps {
   fields: Plugin_plugin_configuration[];
 }
 
-const useStyles = makeStyles(theme => ({
-  authItem: {
-    display: "flex"
-  },
-  button: {
-    marginRight: theme.spacing()
-  },
-  item: {
-    "&:not(:last-child)": {
-      marginBottom: theme.spacing(3)
+const useStyles = makeStyles(
+  theme => ({
+    authItem: {
+      display: "flex"
+    },
+    button: {
+      marginRight: theme.spacing()
+    },
+    item: {
+      "&:not(:last-child)": {
+        marginBottom: theme.spacing(3)
+      }
+    },
+    itemLabel: {
+      fontWeight: 500
+    },
+    spacer: {
+      flex: 1
     }
-  },
-  itemLabel: {
-    fontWeight: 500
-  },
-  spacer: {
-    flex: 1
-  }
-}));
+  }),
+  { name: "PluginSettings" }
+);
 
 const PluginSettings: React.FC<PluginSettingsProps> = ({
   data,
diff --git a/src/plugins/components/PluginsList/PluginsList.tsx b/src/plugins/components/PluginsList/PluginsList.tsx
index 0094146a7..aa28941d9 100644
--- a/src/plugins/components/PluginsList/PluginsList.tsx
+++ b/src/plugins/components/PluginsList/PluginsList.tsx
@@ -22,24 +22,27 @@ export interface PluginListProps extends ListProps {
   plugins: Plugins_plugins_edges_node[];
 }
 
-const useStyles = makeStyles(theme => ({
-  [theme.breakpoints.up("lg")]: {
-    colAction: {
-      "& svg": {
-        color: theme.palette.primary.main
+const useStyles = makeStyles(
+  theme => ({
+    [theme.breakpoints.up("lg")]: {
+      colAction: {
+        "& svg": {
+          color: theme.palette.primary.main
+        },
+        textAlign: "right" as "right"
       },
-      textAlign: "right" as "right"
+      colActive: {},
+      colName: {}
     },
+    colAction: {},
     colActive: {},
-    colName: {}
-  },
-  colAction: {},
-  colActive: {},
-  colName: {},
-  link: {
-    cursor: "pointer"
-  }
-}));
+    colName: {},
+    link: {
+      cursor: "pointer"
+    }
+  }),
+  { name: "PluginsList" }
+);
 
 const numberOfColumns = 4;
 
diff --git a/src/productTypes/components/AssignAttributeDialog/AssignAttributeDialog.tsx b/src/productTypes/components/AssignAttributeDialog/AssignAttributeDialog.tsx
index 6b4f93093..96f392455 100644
--- a/src/productTypes/components/AssignAttributeDialog/AssignAttributeDialog.tsx
+++ b/src/productTypes/components/AssignAttributeDialog/AssignAttributeDialog.tsx
@@ -32,29 +32,32 @@ import { maybe, renderCollection } from "@saleor/misc";
 import { FetchMoreProps } from "@saleor/types";
 import { SearchAttributes_productType_availableAttributes_edges_node } from "../../hooks/useAvailableAttributeSearch/types/SearchAttributes";
 
-const useStyles = makeStyles(theme => ({
-  actions: {
-    boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)"
-  },
-  checkboxCell: {
-    paddingLeft: 0
-  },
-  dropShadow: {
-    boxShadow: `0px -5px 10px 0px ${theme.palette.divider}`
-  },
-  loadMoreLoaderContainer: {
-    alignItems: "center",
-    display: "flex",
-    height: theme.spacing(3),
-    justifyContent: "center"
-  },
-  scrollArea: {
-    overflowY: "scroll"
-  },
-  wideCell: {
-    width: "100%"
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    actions: {
+      boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)"
+    },
+    checkboxCell: {
+      paddingLeft: 0
+    },
+    dropShadow: {
+      boxShadow: `0px -5px 10px 0px ${theme.palette.divider}`
+    },
+    loadMoreLoaderContainer: {
+      alignItems: "center",
+      display: "flex",
+      height: theme.spacing(3),
+      justifyContent: "center"
+    },
+    scrollArea: {
+      overflowY: "scroll"
+    },
+    wideCell: {
+      width: "100%"
+    }
+  }),
+  { name: "AssignAttributeDialog" }
+);
 
 export interface AssignAttributeDialogProps extends FetchMoreProps {
   confirmButtonState: ConfirmButtonTransitionState;
diff --git a/src/productTypes/components/ProductTypeAttributes/ProductTypeAttributes.tsx b/src/productTypes/components/ProductTypeAttributes/ProductTypeAttributes.tsx
index 4355a1047..4141ad5d9 100644
--- a/src/productTypes/components/ProductTypeAttributes/ProductTypeAttributes.tsx
+++ b/src/productTypes/components/ProductTypeAttributes/ProductTypeAttributes.tsx
@@ -25,24 +25,27 @@ import {
   ProductTypeDetails_productType_variantAttributes
 } from "../../types/ProductTypeDetails";
 
-const useStyles = makeStyles(theme => ({
-  colName: {},
-  colSlug: {
-    width: 300
-  },
-  iconCell: {
-    "&:last-child": {
-      paddingRight: 0
+const useStyles = makeStyles(
+  theme => ({
+    colName: {},
+    colSlug: {
+      width: 300
     },
-    width: 48 + theme.spacing(1.5)
-  },
-  link: {
-    cursor: "pointer"
-  },
-  textLeft: {
-    textAlign: "left"
-  }
-}));
+    iconCell: {
+      "&:last-child": {
+        paddingRight: 0
+      },
+      width: 48 + theme.spacing(1.5)
+    },
+    link: {
+      cursor: "pointer"
+    },
+    textLeft: {
+      textAlign: "left"
+    }
+  }),
+  { name: "ProductTypeAttributes" }
+);
 
 interface ProductTypeAttributesProps extends ListActions {
   attributes:
diff --git a/src/productTypes/components/ProductTypeDetails/ProductTypeDetails.tsx b/src/productTypes/components/ProductTypeDetails/ProductTypeDetails.tsx
index 4283e5587..ef59b0294 100644
--- a/src/productTypes/components/ProductTypeDetails/ProductTypeDetails.tsx
+++ b/src/productTypes/components/ProductTypeDetails/ProductTypeDetails.tsx
@@ -9,11 +9,14 @@ import CardTitle from "@saleor/components/CardTitle";
 import { commonMessages } from "@saleor/intl";
 import { FormErrors } from "@saleor/types";
 
-const useStyles = makeStyles({
-  root: {
-    overflow: "visible"
-  }
-});
+const useStyles = makeStyles(
+  {
+    root: {
+      overflow: "visible"
+    }
+  },
+  { name: "ProductTypeDetails" }
+);
 
 interface ProductTypeDetailsProps {
   data?: {
diff --git a/src/productTypes/components/ProductTypeList/ProductTypeList.tsx b/src/productTypes/components/ProductTypeList/ProductTypeList.tsx
index 17eb98f4d..4db1bc5ca 100644
--- a/src/productTypes/components/ProductTypeList/ProductTypeList.tsx
+++ b/src/productTypes/components/ProductTypeList/ProductTypeList.tsx
@@ -16,25 +16,28 @@ import { maybe, renderCollection } from "../../../misc";
 import { ListActions, ListProps } from "../../../types";
 import { ProductTypeList_productTypes_edges_node } from "../../types/ProductTypeList";
 
-const useStyles = makeStyles(theme => ({
-  [theme.breakpoints.up("lg")]: {
-    colName: {},
-    colTax: {
-      width: 300
+const useStyles = makeStyles(
+  theme => ({
+    [theme.breakpoints.up("lg")]: {
+      colName: {},
+      colTax: {
+        width: 300
+      },
+      colType: {
+        width: 300
+      }
     },
-    colType: {
-      width: 300
+    colName: {
+      paddingLeft: 0
+    },
+    colTax: {},
+    colType: {},
+    link: {
+      cursor: "pointer"
     }
-  },
-  colName: {
-    paddingLeft: 0
-  },
-  colTax: {},
-  colType: {},
-  link: {
-    cursor: "pointer"
-  }
-}));
+  }),
+  { name: "ProductTypeList" }
+);
 
 interface ProductTypeListProps extends ListProps, ListActions {
   productTypes: ProductTypeList_productTypes_edges_node[];
diff --git a/src/productTypes/components/ProductTypeTaxes/ProductTypeTaxes.tsx b/src/productTypes/components/ProductTypeTaxes/ProductTypeTaxes.tsx
index ac2cdc27f..b1f972978 100644
--- a/src/productTypes/components/ProductTypeTaxes/ProductTypeTaxes.tsx
+++ b/src/productTypes/components/ProductTypeTaxes/ProductTypeTaxes.tsx
@@ -20,11 +20,14 @@ interface ProductTypeTaxesProps {
   onChange: (event: React.ChangeEvent<any>) => void;
 }
 
-const useStyles = makeStyles({
-  root: {
-    overflow: "visible"
-  }
-});
+const useStyles = makeStyles(
+  {
+    root: {
+      overflow: "visible"
+    }
+  },
+  { name: "ProductTypeTaxes" }
+);
 
 const ProductTypeTaxes: React.FC<ProductTypeTaxesProps> = props => {
   const { data, disabled, taxTypes, taxTypeDisplayName, onChange } = props;
diff --git a/src/products/components/ProductAttributes/ProductAttributes.tsx b/src/products/components/ProductAttributes/ProductAttributes.tsx
index cfb48c004..24617faeb 100644
--- a/src/products/components/ProductAttributes/ProductAttributes.tsx
+++ b/src/products/components/ProductAttributes/ProductAttributes.tsx
@@ -38,48 +38,51 @@ export interface ProductAttributesProps {
   onMultiChange: FormsetChange;
 }
 
-const useStyles = makeStyles(theme => ({
-  attributeSection: {
-    "&:last-of-type": {
-      paddingBottom: 0
+const useStyles = makeStyles(
+  theme => ({
+    attributeSection: {
+      "&:last-of-type": {
+        paddingBottom: 0
+      },
+      padding: theme.spacing(2, 0)
     },
-    padding: theme.spacing(2, 0)
-  },
-  attributeSectionLabel: {
-    alignItems: "center",
-    display: "flex"
-  },
-  card: {
-    overflow: "visible"
-  },
-  cardContent: {
-    "&:last-child": {
-      paddingBottom: theme.spacing(1)
+    attributeSectionLabel: {
+      alignItems: "center",
+      display: "flex"
     },
-    paddingTop: theme.spacing(1)
-  },
-  expansionBar: {
-    display: "flex"
-  },
-  expansionBarButton: {
-    marginBottom: theme.spacing(1)
-  },
-  expansionBarButtonIcon: {
-    transition: theme.transitions.duration.short + "ms"
-  },
-  expansionBarLabel: {
-    color: theme.palette.text.disabled,
-    fontSize: 14
-  },
-  expansionBarLabelContainer: {
-    alignItems: "center",
-    display: "flex",
-    flex: 1
-  },
-  rotate: {
-    transform: "rotate(180deg)"
-  }
-}));
+    card: {
+      overflow: "visible"
+    },
+    cardContent: {
+      "&:last-child": {
+        paddingBottom: theme.spacing(1)
+      },
+      paddingTop: theme.spacing(1)
+    },
+    expansionBar: {
+      display: "flex"
+    },
+    expansionBarButton: {
+      marginBottom: theme.spacing(1)
+    },
+    expansionBarButtonIcon: {
+      transition: theme.transitions.duration.short + "ms"
+    },
+    expansionBarLabel: {
+      color: theme.palette.text.disabled,
+      fontSize: 14
+    },
+    expansionBarLabelContainer: {
+      alignItems: "center",
+      display: "flex",
+      flex: 1
+    },
+    rotate: {
+      transform: "rotate(180deg)"
+    }
+  }),
+  { name: "ProductAttributes" }
+);
 
 function getMultiChoices(
   values: ProductDetails_product_attributes_attribute_values[]
diff --git a/src/products/components/ProductImageNavigation/ProductImageNavigation.tsx b/src/products/components/ProductImageNavigation/ProductImageNavigation.tsx
index c56095efd..6868013ff 100644
--- a/src/products/components/ProductImageNavigation/ProductImageNavigation.tsx
+++ b/src/products/components/ProductImageNavigation/ProductImageNavigation.tsx
@@ -8,37 +8,40 @@ import { useIntl } from "react-intl";
 import CardTitle from "@saleor/components/CardTitle";
 import Skeleton from "@saleor/components/Skeleton";
 
-const useStyles = makeStyles(theme => ({
-  card: {
-    marginBottom: theme.spacing(2)
-  },
-  highlightedImageContainer: {
-    borderColor: theme.palette.primary.main
-  },
-  image: {
-    height: "100%",
-    objectFit: "contain",
-    userSelect: "none",
-    width: "100%"
-  },
-  imageContainer: {
-    background: "#ffffff",
-    border: "2px solid #eaeaea",
-    borderRadius: theme.spacing(),
-    cursor: "pointer",
-    height: 48,
-    overflow: "hidden",
-    padding: theme.spacing(0.5),
-    position: "relative"
-  },
-  root: {
-    display: "grid",
-    gridColumnGap: theme.spacing(2),
-    gridRowGap: theme.spacing(1),
-    gridTemplateColumns: "repeat(4, 1fr)"
-  },
-  toolbar: { marginTop: -theme.spacing(0.5) }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    card: {
+      marginBottom: theme.spacing(2)
+    },
+    highlightedImageContainer: {
+      borderColor: theme.palette.primary.main
+    },
+    image: {
+      height: "100%",
+      objectFit: "contain",
+      userSelect: "none",
+      width: "100%"
+    },
+    imageContainer: {
+      background: "#ffffff",
+      border: "2px solid #eaeaea",
+      borderRadius: theme.spacing(),
+      cursor: "pointer",
+      height: 48,
+      overflow: "hidden",
+      padding: theme.spacing(0.5),
+      position: "relative"
+    },
+    root: {
+      display: "grid",
+      gridColumnGap: theme.spacing(2),
+      gridRowGap: theme.spacing(1),
+      gridTemplateColumns: "repeat(4, 1fr)"
+    },
+    toolbar: { marginTop: -theme.spacing(0.5) }
+  }),
+  { name: "ProductImageNavigation" }
+);
 
 interface ProductImageNavigationProps {
   disabled: boolean;
diff --git a/src/products/components/ProductImagePage/ProductImagePage.tsx b/src/products/components/ProductImagePage/ProductImagePage.tsx
index 69a988851..aa00dfb82 100644
--- a/src/products/components/ProductImagePage/ProductImagePage.tsx
+++ b/src/products/components/ProductImagePage/ProductImagePage.tsx
@@ -17,21 +17,24 @@ import Skeleton from "@saleor/components/Skeleton";
 import { commonMessages } from "@saleor/intl";
 import ProductImageNavigation from "../ProductImageNavigation";
 
-const useStyles = makeStyles(theme => ({
-  image: {
-    height: "100%",
-    objectFit: "contain",
-    width: "100%"
-  },
-  imageContainer: {
-    background: "#ffffff",
-    border: "1px solid #eaeaea",
-    borderRadius: theme.spacing(),
-    margin: `0 auto ${theme.spacing(2)}px`,
-    maxWidth: 552,
-    padding: theme.spacing(2)
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    image: {
+      height: "100%",
+      objectFit: "contain",
+      width: "100%"
+    },
+    imageContainer: {
+      background: "#ffffff",
+      border: "1px solid #eaeaea",
+      borderRadius: theme.spacing(),
+      margin: `0 auto ${theme.spacing(2)}px`,
+      maxWidth: 552,
+      padding: theme.spacing(2)
+    }
+  }),
+  { name: "ProductImagePage" }
+);
 
 interface ProductImagePageProps {
   image?: {
diff --git a/src/products/components/ProductImages/ProductImages.tsx b/src/products/components/ProductImages/ProductImages.tsx
index 9a34d63e2..00e5157c4 100644
--- a/src/products/components/ProductImages/ProductImages.tsx
+++ b/src/products/components/ProductImages/ProductImages.tsx
@@ -14,95 +14,98 @@ import { useIntl } from "react-intl";
 import { SortableContainer, SortableElement } from "react-sortable-hoc";
 import { ProductDetails_product_images } from "../../types/ProductDetails";
 
-const useStyles = makeStyles(theme => ({
-  card: {
-    marginTop: theme.spacing(2),
-    [theme.breakpoints.down("sm")]: {
-      marginTop: 0
-    }
-  },
-  fileField: {
-    display: "none"
-  },
-  icon: {
-    color: "rgba(255, 255, 255, 0.54)"
-  },
-  image: {
-    height: "100%",
-    objectFit: "contain",
-    userSelect: "none",
-    width: "100%"
-  },
-  imageContainer: {
-    "&:hover, &.dragged": {
-      "& $imageOverlay": {
-        display: "block"
+const useStyles = makeStyles(
+  theme => ({
+    card: {
+      marginTop: theme.spacing(2),
+      [theme.breakpoints.down("sm")]: {
+        marginTop: 0
       }
     },
-    background: "#ffffff",
-    border: "1px solid #eaeaea",
-    borderRadius: theme.spacing(),
-    height: 140,
-    margin: "auto",
-    overflow: "hidden",
-    padding: theme.spacing(2),
-    position: "relative",
-    width: 140
-  },
-  imageGridContainer: {
-    position: "relative"
-  },
-  imageOverlay: {
-    background: "rgba(0, 0, 0, 0.6)",
-    cursor: "move",
-    display: "none",
-    height: 140,
-    left: 0,
-    padding: theme.spacing(2),
-    position: "absolute",
-    top: 0,
-    width: 140
-  },
-  imageOverlayToolbar: {
-    alignContent: "flex-end",
-    display: "flex",
-    position: "relative",
-    right: -theme.spacing(3),
-    top: -theme.spacing(2)
-  },
-  imageUpload: {
-    height: "100%",
-    left: 0,
-    outline: 0,
-    position: "absolute",
-    top: 0,
-    width: "100%"
-  },
-  imageUploadActive: {
-    zIndex: 1
-  },
-  imageUploadIcon: {
-    display: "none"
-  },
-  imageUploadIconActive: {
-    display: "block"
-  },
-  root: {
-    display: "grid",
-    gridColumnGap: theme.spacing(2),
-    gridRowGap: theme.spacing(2),
-    gridTemplateColumns: "repeat(4, 1fr)",
-    [theme.breakpoints.down("sm")]: {
-      gridTemplateColumns: "repeat(3, 1fr)"
+    fileField: {
+      display: "none"
     },
-    [theme.breakpoints.down("xs")]: {
-      gridTemplateColumns: "repeat(2, 1fr)"
+    icon: {
+      color: "rgba(255, 255, 255, 0.54)"
+    },
+    image: {
+      height: "100%",
+      objectFit: "contain",
+      userSelect: "none",
+      width: "100%"
+    },
+    imageContainer: {
+      "&:hover, &.dragged": {
+        "& $imageOverlay": {
+          display: "block"
+        }
+      },
+      background: "#ffffff",
+      border: "1px solid #eaeaea",
+      borderRadius: theme.spacing(),
+      height: 140,
+      margin: "auto",
+      overflow: "hidden",
+      padding: theme.spacing(2),
+      position: "relative",
+      width: 140
+    },
+    imageGridContainer: {
+      position: "relative"
+    },
+    imageOverlay: {
+      background: "rgba(0, 0, 0, 0.6)",
+      cursor: "move",
+      display: "none",
+      height: 140,
+      left: 0,
+      padding: theme.spacing(2),
+      position: "absolute",
+      top: 0,
+      width: 140
+    },
+    imageOverlayToolbar: {
+      alignContent: "flex-end",
+      display: "flex",
+      position: "relative",
+      right: -theme.spacing(3),
+      top: -theme.spacing(2)
+    },
+    imageUpload: {
+      height: "100%",
+      left: 0,
+      outline: 0,
+      position: "absolute",
+      top: 0,
+      width: "100%"
+    },
+    imageUploadActive: {
+      zIndex: 1
+    },
+    imageUploadIcon: {
+      display: "none"
+    },
+    imageUploadIconActive: {
+      display: "block"
+    },
+    root: {
+      display: "grid",
+      gridColumnGap: theme.spacing(2),
+      gridRowGap: theme.spacing(2),
+      gridTemplateColumns: "repeat(4, 1fr)",
+      [theme.breakpoints.down("sm")]: {
+        gridTemplateColumns: "repeat(3, 1fr)"
+      },
+      [theme.breakpoints.down("xs")]: {
+        gridTemplateColumns: "repeat(2, 1fr)"
+      }
+    },
+    rootDragActive: {
+      opacity: 0.2
     }
-  },
-  rootDragActive: {
-    opacity: 0.2
-  }
-}));
+  }),
+  { name: "ProductImages" }
+);
 
 interface ProductImagesProps {
   placeholderImage?: string;
diff --git a/src/products/components/ProductList/ProductList.tsx b/src/products/components/ProductList/ProductList.tsx
index 14210ce09..dcd7c7add 100644
--- a/src/products/components/ProductList/ProductList.tsx
+++ b/src/products/components/ProductList/ProductList.tsx
@@ -33,58 +33,61 @@ import TDisplayColumn, {
 } from "@saleor/utils/columns/DisplayColumn";
 import { getArrowDirection } from "@saleor/utils/sort";
 
-const useStyles = makeStyles(theme => ({
-  [theme.breakpoints.up("lg")]: {
+const useStyles = makeStyles(
+  theme => ({
+    [theme.breakpoints.up("lg")]: {
+      colName: {
+        width: "auto"
+      },
+      colPrice: {
+        width: 200
+      },
+      colPublished: {
+        width: 200
+      },
+      colType: {
+        width: 200
+      }
+    },
+    colAttribute: {
+      width: 150
+    },
+    colFill: {
+      padding: 0,
+      width: "100%"
+    },
     colName: {
-      width: "auto"
+      "&$colNameFixed": {
+        width: 250
+      }
+    },
+    colNameFixed: {},
+    colNameHeader: {
+      marginLeft: AVATAR_MARGIN
     },
     colPrice: {
-      width: 200
+      textAlign: "right"
     },
-    colPublished: {
-      width: 200
+    colPublished: {},
+    colType: {},
+    link: {
+      cursor: "pointer"
     },
-    colType: {
-      width: 200
+    table: {
+      tableLayout: "fixed"
+    },
+    tableContainer: {
+      overflowX: "scroll"
+    },
+    textLeft: {
+      textAlign: "left"
+    },
+    textRight: {
+      textAlign: "right"
     }
-  },
-  colAttribute: {
-    width: 150
-  },
-  colFill: {
-    padding: 0,
-    width: "100%"
-  },
-  colName: {
-    "&$colNameFixed": {
-      width: 250
-    }
-  },
-  colNameFixed: {},
-  colNameHeader: {
-    marginLeft: AVATAR_MARGIN
-  },
-  colPrice: {
-    textAlign: "right"
-  },
-  colPublished: {},
-  colType: {},
-  link: {
-    cursor: "pointer"
-  },
-  table: {
-    tableLayout: "fixed"
-  },
-  tableContainer: {
-    overflowX: "scroll"
-  },
-  textLeft: {
-    textAlign: "left"
-  },
-  textRight: {
-    textAlign: "right"
-  }
-}));
+  }),
+  { name: "ProductList" }
+);
 
 const DisplayColumn = TDisplayColumn as React.FunctionComponent<
   DisplayColumnProps<ProductListColumns>
diff --git a/src/products/components/ProductListPage/ProductListPage.tsx b/src/products/components/ProductListPage/ProductListPage.tsx
index fdb9fabee..6ebc13096 100644
--- a/src/products/components/ProductListPage/ProductListPage.tsx
+++ b/src/products/components/ProductListPage/ProductListPage.tsx
@@ -41,11 +41,14 @@ export interface ProductListPageProps
   products: ProductList_products_edges_node[];
 }
 
-const useStyles = makeStyles(theme => ({
-  columnPicker: {
-    marginRight: theme.spacing(3)
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    columnPicker: {
+      marginRight: theme.spacing(3)
+    }
+  }),
+  { name: "ProductListPage" }
+);
 
 export const ProductListPage: React.FC<ProductListPageProps> = props => {
   const {
diff --git a/src/products/components/ProductOrganization/ProductOrganization.tsx b/src/products/components/ProductOrganization/ProductOrganization.tsx
index 312e7188d..3ff707189 100644
--- a/src/products/components/ProductOrganization/ProductOrganization.tsx
+++ b/src/products/components/ProductOrganization/ProductOrganization.tsx
@@ -25,18 +25,21 @@ interface ProductType {
   name: string;
 }
 
-const useStyles = makeStyles(theme => ({
-  card: {
-    overflow: "visible"
-  },
-  cardSubtitle: {
-    fontSize: "1rem",
-    marginBottom: theme.spacing(0.5)
-  },
-  label: {
-    marginBottom: theme.spacing(0.5)
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    card: {
+      overflow: "visible"
+    },
+    cardSubtitle: {
+      fontSize: "1rem",
+      marginBottom: theme.spacing(0.5)
+    },
+    label: {
+      marginBottom: theme.spacing(0.5)
+    }
+  }),
+  { name: "ProductOrganization" }
+);
 
 interface ProductOrganizationProps {
   canChangeType: boolean;
diff --git a/src/products/components/ProductPricing/ProductPricing.tsx b/src/products/components/ProductPricing/ProductPricing.tsx
index e49b1b2c8..02af6385f 100644
--- a/src/products/components/ProductPricing/ProductPricing.tsx
+++ b/src/products/components/ProductPricing/ProductPricing.tsx
@@ -8,13 +8,16 @@ import CardTitle from "@saleor/components/CardTitle";
 import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
 import PriceField from "@saleor/components/PriceField";
 
-const useStyles = makeStyles(theme => ({
-  root: {
-    display: "grid",
-    gridColumnGap: theme.spacing(2),
-    gridTemplateColumns: "1fr 1fr"
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    root: {
+      display: "grid",
+      gridColumnGap: theme.spacing(2),
+      gridTemplateColumns: "1fr 1fr"
+    }
+  }),
+  { name: "ProductPricing" }
+);
 
 interface ProductPricingProps {
   currency?: string;
diff --git a/src/products/components/ProductStock/ProductStock.tsx b/src/products/components/ProductStock/ProductStock.tsx
index a7f1fe670..3b51a8ba4 100644
--- a/src/products/components/ProductStock/ProductStock.tsx
+++ b/src/products/components/ProductStock/ProductStock.tsx
@@ -9,13 +9,16 @@ import CardTitle from "@saleor/components/CardTitle";
 import { maybe } from "../../../misc";
 import { ProductDetails_product } from "../../types/ProductDetails";
 
-const useStyles = makeStyles(theme => ({
-  root: {
-    display: "grid",
-    gridColumnGap: theme.spacing(2),
-    gridTemplateColumns: "1fr 1fr"
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    root: {
+      display: "grid",
+      gridColumnGap: theme.spacing(2),
+      gridTemplateColumns: "1fr 1fr"
+    }
+  }),
+  { name: "ProductStock" }
+);
 
 interface ProductStockProps {
   data: {
diff --git a/src/products/components/ProductVariantCreateDialog/ProductVariantCreateContent.tsx b/src/products/components/ProductVariantCreateDialog/ProductVariantCreateContent.tsx
index 34bdb7ee9..398b8cf3e 100644
--- a/src/products/components/ProductVariantCreateDialog/ProductVariantCreateContent.tsx
+++ b/src/products/components/ProductVariantCreateDialog/ProductVariantCreateContent.tsx
@@ -12,18 +12,21 @@ import ProductVariantCreateValues from "./ProductVariantCreateValues";
 import { ProductVariantCreateReducerAction } from "./reducer";
 import { ProductVariantCreateStep } from "./types";
 
-const useStyles = makeStyles(theme => ({
-  root: {
-    maxHeight: 400,
-    overflowX: "hidden",
-    overflowY: "scroll",
-    paddingLeft: theme.spacing(3),
-    paddingRight: theme.spacing(2),
-    position: "relative",
-    right: theme.spacing(3),
-    width: `calc(100% + ${theme.spacing(3)}px)`
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    root: {
+      maxHeight: 400,
+      overflowX: "hidden",
+      overflowY: "scroll",
+      paddingLeft: theme.spacing(3),
+      paddingRight: theme.spacing(2),
+      position: "relative",
+      right: theme.spacing(3),
+      width: `calc(100% + ${theme.spacing(3)}px)`
+    }
+  }),
+  { name: "ProductVariantCreateContent" }
+);
 
 export interface ProductVariantCreateContentProps {
   attributes: ProductDetails_product_productType_variantAttributes[];
diff --git a/src/products/components/ProductVariantCreateDialog/ProductVariantCreateDialog.tsx b/src/products/components/ProductVariantCreateDialog/ProductVariantCreateDialog.tsx
index 658a53c55..17b7f6998 100644
--- a/src/products/components/ProductVariantCreateDialog/ProductVariantCreateDialog.tsx
+++ b/src/products/components/ProductVariantCreateDialog/ProductVariantCreateDialog.tsx
@@ -17,19 +17,22 @@ import ProductVariantCreateContent, {
 import reduceProductVariantCreateFormData from "./reducer";
 import { ProductVariantCreateStep } from "./types";
 
-const useStyles = makeStyles(theme => ({
-  button: {
-    marginLeft: theme.spacing(2)
-  },
-  content: {
-    overflowX: "visible",
-    overflowY: "hidden",
-    width: 800
-  },
-  spacer: {
-    flex: 1
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    button: {
+      marginLeft: theme.spacing(2)
+    },
+    content: {
+      overflowX: "visible",
+      overflowY: "hidden",
+      width: 800
+    },
+    spacer: {
+      flex: 1
+    }
+  }),
+  { name: "ProductVariantCreateDialog" }
+);
 
 function canHitNext(
   step: ProductVariantCreateStep,
diff --git a/src/products/components/ProductVariantCreateDialog/ProductVariantCreatePrices.tsx b/src/products/components/ProductVariantCreateDialog/ProductVariantCreatePrices.tsx
index efffeddaf..d4ef692f9 100644
--- a/src/products/components/ProductVariantCreateDialog/ProductVariantCreatePrices.tsx
+++ b/src/products/components/ProductVariantCreateDialog/ProductVariantCreatePrices.tsx
@@ -14,21 +14,24 @@ import SingleSelectField from "@saleor/components/SingleSelectField";
 import { ProductDetails_product_productType_variantAttributes } from "@saleor/products/types/ProductDetails";
 import { ProductVariantCreateFormData } from "./form";
 
-const useStyles = makeStyles(theme => ({
-  hr: {
-    marginBottom: theme.spacing(),
-    marginTop: theme.spacing(0.5)
-  },
-  hrAttribute: {
-    marginTop: theme.spacing(2)
-  },
-  label: {
-    alignSelf: "center"
-  },
-  shortInput: {
-    width: "50%"
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    hr: {
+      marginBottom: theme.spacing(),
+      marginTop: theme.spacing(0.5)
+    },
+    hrAttribute: {
+      marginTop: theme.spacing(2)
+    },
+    label: {
+      alignSelf: "center"
+    },
+    shortInput: {
+      width: "50%"
+    }
+  }),
+  { name: "ProductVariantCreatePrices" }
+);
 
 export type PriceOrStock = "price" | "stock";
 export interface ProductVariantCreatePricesProps {
diff --git a/src/products/components/ProductVariantCreateDialog/ProductVariantCreateValues.tsx b/src/products/components/ProductVariantCreateDialog/ProductVariantCreateValues.tsx
index d74533db6..212f7dcbd 100644
--- a/src/products/components/ProductVariantCreateDialog/ProductVariantCreateValues.tsx
+++ b/src/products/components/ProductVariantCreateDialog/ProductVariantCreateValues.tsx
@@ -17,18 +17,21 @@ export interface ProductVariantCreateValuesProps {
   onValueClick: (attributeId: string, valueId: string) => void;
 }
 
-const useStyles = makeStyles(theme => ({
-  hr: {
-    marginBottom: theme.spacing(),
-    marginTop: theme.spacing(0.5)
-  },
-  valueContainer: {
-    display: "grid",
-    gridColumnGap: theme.spacing(3),
-    gridTemplateColumns: "repeat(3, 1fr)",
-    marginBottom: theme.spacing(3)
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    hr: {
+      marginBottom: theme.spacing(),
+      marginTop: theme.spacing(0.5)
+    },
+    valueContainer: {
+      display: "grid",
+      gridColumnGap: theme.spacing(3),
+      gridTemplateColumns: "repeat(3, 1fr)",
+      marginBottom: theme.spacing(3)
+    }
+  }),
+  { name: "ProductVariantCreateValues" }
+);
 
 const ProductVariantCreateValues: React.FC<
   ProductVariantCreateValuesProps
diff --git a/src/products/components/ProductVariantDeleteDialog/ProductVariantDeleteDialog.tsx b/src/products/components/ProductVariantDeleteDialog/ProductVariantDeleteDialog.tsx
index 48a77b484..d3855fb8c 100644
--- a/src/products/components/ProductVariantDeleteDialog/ProductVariantDeleteDialog.tsx
+++ b/src/products/components/ProductVariantDeleteDialog/ProductVariantDeleteDialog.tsx
@@ -13,15 +13,18 @@ import ConfirmButton, {
 } from "@saleor/components/ConfirmButton";
 import { buttonMessages } from "@saleor/intl";
 
-const useStyles = makeStyles(theme => ({
-  deleteButton: {
-    "&:hover": {
-      backgroundColor: theme.palette.error.main
-    },
-    backgroundColor: theme.palette.error.main,
-    color: theme.palette.error.contrastText
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    deleteButton: {
+      "&:hover": {
+        backgroundColor: theme.palette.error.main
+      },
+      backgroundColor: theme.palette.error.main,
+      color: theme.palette.error.contrastText
+    }
+  }),
+  { name: "ProductVariantDeleteDialog" }
+);
 
 export interface ProductVariantDeleteDialogProps {
   confirmButtonState: ConfirmButtonTransitionState;
diff --git a/src/products/components/ProductVariantImageSelectDialog/ProductVariantImageSelectDialog.tsx b/src/products/components/ProductVariantImageSelectDialog/ProductVariantImageSelectDialog.tsx
index 4c85038d1..ba861a096 100644
--- a/src/products/components/ProductVariantImageSelectDialog/ProductVariantImageSelectDialog.tsx
+++ b/src/products/components/ProductVariantImageSelectDialog/ProductVariantImageSelectDialog.tsx
@@ -11,39 +11,42 @@ import { FormattedMessage } from "react-intl";
 import { buttonMessages } from "@saleor/intl";
 import { ProductImage } from "../../types/ProductImage";
 
-const useStyles = makeStyles(theme => ({
-  image: {
-    height: "100%",
-    objectFit: "contain",
-    userSelect: "none",
-    width: "100%"
-  },
-  imageContainer: {
-    background: "#ffffff",
-    border: "1px solid #eaeaea",
-    borderRadius: theme.spacing(),
-    cursor: "pointer",
-    height: theme.spacing(21.5),
-    overflow: "hidden",
-    padding: theme.spacing(2),
-    position: "relative",
-    transitionDuration: theme.transitions.duration.standard + "ms"
-  },
-  root: {
-    display: "grid",
-    gridColumnGap: theme.spacing(2),
-    gridRowGap: theme.spacing(2),
-    gridTemplateColumns: "repeat(3, 1fr)",
-    maxWidth: "100%",
-    width: theme.breakpoints.values.lg,
-    [theme.breakpoints.down("sm")]: {
-      gridTemplateColumns: "repeat(2, 1fr)"
+const useStyles = makeStyles(
+  theme => ({
+    image: {
+      height: "100%",
+      objectFit: "contain",
+      userSelect: "none",
+      width: "100%"
+    },
+    imageContainer: {
+      background: "#ffffff",
+      border: "1px solid #eaeaea",
+      borderRadius: theme.spacing(),
+      cursor: "pointer",
+      height: theme.spacing(21.5),
+      overflow: "hidden",
+      padding: theme.spacing(2),
+      position: "relative",
+      transitionDuration: theme.transitions.duration.standard + "ms"
+    },
+    root: {
+      display: "grid",
+      gridColumnGap: theme.spacing(2),
+      gridRowGap: theme.spacing(2),
+      gridTemplateColumns: "repeat(3, 1fr)",
+      maxWidth: "100%",
+      width: theme.breakpoints.values.lg,
+      [theme.breakpoints.down("sm")]: {
+        gridTemplateColumns: "repeat(2, 1fr)"
+      }
+    },
+    selectedImageContainer: {
+      borderColor: theme.palette.primary.main
     }
-  },
-  selectedImageContainer: {
-    borderColor: theme.palette.primary.main
-  }
-}));
+  }),
+  { name: "ProductVariantImageSelectDialog" }
+);
 
 interface ProductVariantImageSelectDialogProps {
   images?: ProductImage[];
diff --git a/src/products/components/ProductVariantImages/ProductVariantImages.tsx b/src/products/components/ProductVariantImages/ProductVariantImages.tsx
index 68a8209ca..18d8f48b5 100644
--- a/src/products/components/ProductVariantImages/ProductVariantImages.tsx
+++ b/src/products/components/ProductVariantImages/ProductVariantImages.tsx
@@ -10,34 +10,37 @@ import CardTitle from "@saleor/components/CardTitle";
 import Skeleton from "@saleor/components/Skeleton";
 import { ProductImage } from "../../types/ProductImage";
 
-const useStyles = makeStyles(theme => ({
-  gridElement: {
-    "& img": {
+const useStyles = makeStyles(
+  theme => ({
+    gridElement: {
+      "& img": {
+        width: "100%"
+      }
+    },
+    helpText: {
+      gridColumnEnd: "span 4"
+    },
+    image: {
+      height: "100%",
+      objectFit: "contain",
       width: "100%"
+    },
+    imageContainer: {
+      background: "#ffffff",
+      border: "1px solid #eaeaea",
+      borderRadius: theme.spacing(),
+      height: theme.spacing(17.5),
+      marginBottom: theme.spacing(2),
+      padding: theme.spacing(2)
+    },
+    root: {
+      display: "grid",
+      gridColumnGap: theme.spacing(2),
+      gridTemplateColumns: "repeat(4, 1fr)"
     }
-  },
-  helpText: {
-    gridColumnEnd: "span 4"
-  },
-  image: {
-    height: "100%",
-    objectFit: "contain",
-    width: "100%"
-  },
-  imageContainer: {
-    background: "#ffffff",
-    border: "1px solid #eaeaea",
-    borderRadius: theme.spacing(),
-    height: theme.spacing(17.5),
-    marginBottom: theme.spacing(2),
-    padding: theme.spacing(2)
-  },
-  root: {
-    display: "grid",
-    gridColumnGap: theme.spacing(2),
-    gridTemplateColumns: "repeat(4, 1fr)"
-  }
-}));
+  }),
+  { name: "ProductVariantImages" }
+);
 
 interface ProductVariantImagesProps {
   images?: ProductImage[];
diff --git a/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx b/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx
index 4e1e7ae6a..79a1ac224 100644
--- a/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx
+++ b/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx
@@ -16,27 +16,30 @@ import { maybe, renderCollection } from "../../../misc";
 import { ProductVariantCreateData_product_variants } from "../../types/ProductVariantCreateData";
 import { ProductVariantDetails_productVariant } from "../../types/ProductVariantDetails";
 
-const useStyles = makeStyles(theme => ({
-  colName: {
-    paddingLeft: 0,
-    textAlign: [["left"], "!important"] as any
-  },
-  link: {
-    cursor: "pointer"
-  },
-  tabActive: {
-    "&:before": {
-      background: theme.palette.primary.main,
-      content: '""',
-      height: "100%",
-      left: 0,
-      position: "absolute",
-      top: 0,
-      width: 2
+const useStyles = makeStyles(
+  theme => ({
+    colName: {
+      paddingLeft: 0,
+      textAlign: [["left"], "!important"] as any
     },
-    position: "relative"
-  }
-}));
+    link: {
+      cursor: "pointer"
+    },
+    tabActive: {
+      "&:before": {
+        background: theme.palette.primary.main,
+        content: '""',
+        height: "100%",
+        left: 0,
+        position: "absolute",
+        top: 0,
+        width: 2
+      },
+      position: "relative"
+    }
+  }),
+  { name: "ProductVariantNavigation" }
+);
 
 interface ProductVariantNavigationProps {
   current?: string;
diff --git a/src/products/components/ProductVariantPrice/ProductVariantPrice.tsx b/src/products/components/ProductVariantPrice/ProductVariantPrice.tsx
index f5c4e069f..81de4559e 100644
--- a/src/products/components/ProductVariantPrice/ProductVariantPrice.tsx
+++ b/src/products/components/ProductVariantPrice/ProductVariantPrice.tsx
@@ -7,13 +7,16 @@ import { useIntl } from "react-intl";
 import CardTitle from "@saleor/components/CardTitle";
 import PriceField from "@saleor/components/PriceField";
 
-const useStyles = makeStyles(theme => ({
-  grid: {
-    display: "grid",
-    gridColumnGap: theme.spacing(2),
-    gridTemplateColumns: "1fr 1fr"
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    grid: {
+      display: "grid",
+      gridColumnGap: theme.spacing(2),
+      gridTemplateColumns: "1fr 1fr"
+    }
+  }),
+  { name: "ProductVariantPrice" }
+);
 
 interface ProductVariantPriceProps {
   currencySymbol?: string;
diff --git a/src/products/components/ProductVariantStock/ProductVariantStock.tsx b/src/products/components/ProductVariantStock/ProductVariantStock.tsx
index 8e1e2d99b..b05629234 100644
--- a/src/products/components/ProductVariantStock/ProductVariantStock.tsx
+++ b/src/products/components/ProductVariantStock/ProductVariantStock.tsx
@@ -7,13 +7,16 @@ import { useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 
-const useStyles = makeStyles(theme => ({
-  grid: {
-    display: "grid",
-    gridColumnGap: theme.spacing(2),
-    gridTemplateColumns: "1fr 1fr"
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    grid: {
+      display: "grid",
+      gridColumnGap: theme.spacing(2),
+      gridTemplateColumns: "1fr 1fr"
+    }
+  }),
+  { name: "ProductVariantStock" }
+);
 
 interface ProductVariantStockProps {
   errors: {
diff --git a/src/services/components/ServiceList/ServiceList.tsx b/src/services/components/ServiceList/ServiceList.tsx
index 0a68c2216..2b4352d40 100644
--- a/src/services/components/ServiceList/ServiceList.tsx
+++ b/src/services/components/ServiceList/ServiceList.tsx
@@ -23,32 +23,35 @@ export interface ServiceListProps extends ListProps {
   onRemove: (id: string) => void;
 }
 
-const useStyles = makeStyles(theme => ({
-  [theme.breakpoints.up("lg")]: {
-    colName: {
-      "&&": {
-        width: "auto"
+const useStyles = makeStyles(
+  theme => ({
+    [theme.breakpoints.up("lg")]: {
+      colName: {
+        "&&": {
+          width: "auto"
+        }
       }
-    }
-  },
-  colAction: {
-    "&&": {
-      paddingRight: theme.spacing(1)
     },
-    textAlign: "right",
-    width: 100
-  },
-  colName: {
-    paddingLeft: 0,
-    width: 250
-  },
-  table: {
-    tableLayout: "fixed"
-  },
-  tableRow: {
-    cursor: "pointer"
-  }
-}));
+    colAction: {
+      "&&": {
+        paddingRight: theme.spacing(1)
+      },
+      textAlign: "right",
+      width: 100
+    },
+    colName: {
+      paddingLeft: 0,
+      width: 250
+    },
+    table: {
+      tableLayout: "fixed"
+    },
+    tableRow: {
+      cursor: "pointer"
+    }
+  }),
+  { name: "ServiceList" }
+);
 
 const numberOfColumns = 2;
 
diff --git a/src/services/components/ServiceTokens/ServiceTokens.tsx b/src/services/components/ServiceTokens/ServiceTokens.tsx
index 7568847ea..e0c6e39a1 100644
--- a/src/services/components/ServiceTokens/ServiceTokens.tsx
+++ b/src/services/components/ServiceTokens/ServiceTokens.tsx
@@ -22,24 +22,27 @@ export interface ServiceTokensProps {
   onDelete: (id: string) => void;
 }
 
-const useStyles = makeStyles(theme => ({
-  [theme.breakpoints.down("md")]: {
-    colNote: {
+const useStyles = makeStyles(
+  theme => ({
+    [theme.breakpoints.down("md")]: {
+      colNote: {
+        width: 200
+      }
+    },
+    colActions: {
+      textAlign: "right",
+      width: 100
+    },
+    colKey: {
       width: 200
+    },
+    colNote: {},
+    table: {
+      tableLayout: "fixed"
     }
-  },
-  colActions: {
-    textAlign: "right",
-    width: 100
-  },
-  colKey: {
-    width: 200
-  },
-  colNote: {},
-  table: {
-    tableLayout: "fixed"
-  }
-}));
+  }),
+  { name: "ServiceTokens" }
+);
 
 const numberOfColumns = 3;
 
diff --git a/src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx b/src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx
index 9895bf892..a54823b9b 100644
--- a/src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx
+++ b/src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx
@@ -40,24 +40,27 @@ export interface ShippingZoneCountriesAssignDialogProps {
   onConfirm: (data: FormData) => void;
 }
 
-const useStyles = makeStyles(theme => ({
-  checkboxCell: {
-    paddingLeft: 0
-  },
-  container: {
-    maxHeight: 400
-  },
-  heading: {
-    marginBottom: theme.spacing(2),
-    marginTop: theme.spacing(2)
-  },
-  table: {
-    border: "1px solid " + theme.palette.grey[200]
-  },
-  wideCell: {
-    width: "100%"
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    checkboxCell: {
+      paddingLeft: 0
+    },
+    container: {
+      maxHeight: 400
+    },
+    heading: {
+      marginBottom: theme.spacing(2),
+      marginTop: theme.spacing(2)
+    },
+    table: {
+      border: "1px solid " + theme.palette.grey[200]
+    },
+    wideCell: {
+      width: "100%"
+    }
+  }),
+  { name: "ShippingZoneCountriesAssignDialog" }
+);
 const ShippingZoneCountriesAssignDialog: React.FC<
   ShippingZoneCountriesAssignDialogProps
 > = props => {
diff --git a/src/shipping/components/ShippingZoneRates/ShippingZoneRates.tsx b/src/shipping/components/ShippingZoneRates/ShippingZoneRates.tsx
index 64c5ddcd0..870d966dd 100644
--- a/src/shipping/components/ShippingZoneRates/ShippingZoneRates.tsx
+++ b/src/shipping/components/ShippingZoneRates/ShippingZoneRates.tsx
@@ -30,21 +30,24 @@ export interface ShippingZoneRatesProps {
   onRateRemove: (id: string) => void;
 }
 
-const useStyles = makeStyles(theme => ({
-  alignRight: {
-    "&:last-child": {
-      paddingRight: 0
+const useStyles = makeStyles(
+  theme => ({
+    alignRight: {
+      "&:last-child": {
+        paddingRight: 0
+      },
+      paddingRight: 0,
+      width: ICONBUTTON_SIZE + theme.spacing(0.5)
     },
-    paddingRight: 0,
-    width: ICONBUTTON_SIZE + theme.spacing(0.5)
-  },
-  nameColumn: {
-    width: 300
-  },
-  valueColumn: {
-    width: 300
-  }
-}));
+    nameColumn: {
+      width: 300
+    },
+    valueColumn: {
+      width: 300
+    }
+  }),
+  { name: "ShippingZoneRates" }
+);
 const ShippingZoneRates: React.FC<ShippingZoneRatesProps> = props => {
   const {
     disabled,
diff --git a/src/shipping/components/ShippingZonesList/ShippingZonesList.tsx b/src/shipping/components/ShippingZonesList/ShippingZonesList.tsx
index 15c0ac7c2..10295a3fe 100644
--- a/src/shipping/components/ShippingZonesList/ShippingZonesList.tsx
+++ b/src/shipping/components/ShippingZonesList/ShippingZonesList.tsx
@@ -27,25 +27,28 @@ export interface ShippingZonesListProps extends ListProps, ListActions {
   onRemove: (id: string) => void;
 }
 
-const useStyles = makeStyles(theme => ({
-  [theme.breakpoints.up("lg")]: {
-    colCountries: {},
-    colName: { width: 200 }
-  },
-  alignRight: {
-    "&:last-child": {
-      paddingRight: theme.spacing(1)
+const useStyles = makeStyles(
+  theme => ({
+    [theme.breakpoints.up("lg")]: {
+      colCountries: {},
+      colName: { width: 200 }
     },
-    width: ICONBUTTON_SIZE + theme.spacing(0.5)
-  },
-  colCountries: {},
-  colName: {
-    paddingLeft: 0
-  },
-  row: {
-    cursor: "pointer"
-  }
-}));
+    alignRight: {
+      "&:last-child": {
+        paddingRight: theme.spacing(1)
+      },
+      width: ICONBUTTON_SIZE + theme.spacing(0.5)
+    },
+    colCountries: {},
+    colName: {
+      paddingLeft: 0
+    },
+    row: {
+      cursor: "pointer"
+    }
+  }),
+  { name: "ShippingZonesList" }
+);
 
 const numberOfColumns = 4;
 
diff --git a/src/siteSettings/components/SiteSettingsAddress/SiteSettingsAddress.tsx b/src/siteSettings/components/SiteSettingsAddress/SiteSettingsAddress.tsx
index aeda43ec6..0e8f9564f 100644
--- a/src/siteSettings/components/SiteSettingsAddress/SiteSettingsAddress.tsx
+++ b/src/siteSettings/components/SiteSettingsAddress/SiteSettingsAddress.tsx
@@ -26,11 +26,14 @@ interface SiteSettingsAddressProps {
   onCountryChange: (event: ChangeEvent) => void;
 }
 
-const useStyles = makeStyles({
-  root: {
-    overflow: "visible"
-  }
-});
+const useStyles = makeStyles(
+  {
+    root: {
+      overflow: "visible"
+    }
+  },
+  { name: "SiteSettingsAddress" }
+);
 
 const SiteSettingsAddress: React.FC<SiteSettingsAddressProps> = props => {
   const {
diff --git a/src/siteSettings/components/SiteSettingsKeys/SiteSettingsKeys.tsx b/src/siteSettings/components/SiteSettingsKeys/SiteSettingsKeys.tsx
index fa3cb16a4..5f67358a8 100644
--- a/src/siteSettings/components/SiteSettingsKeys/SiteSettingsKeys.tsx
+++ b/src/siteSettings/components/SiteSettingsKeys/SiteSettingsKeys.tsx
@@ -18,14 +18,17 @@ import { ICONBUTTON_SIZE } from "../../../theme";
 import { AuthorizationKeyType } from "../../../types/globalTypes";
 import { SiteSettings_shop_authorizationKeys } from "../../types/SiteSettings";
 
-const useStyles = makeStyles(theme => ({
-  iconCell: {
-    "&:last-child": {
-      paddingRight: 0
-    },
-    width: ICONBUTTON_SIZE + theme.spacing(0.5)
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    iconCell: {
+      "&:last-child": {
+        paddingRight: 0
+      },
+      width: ICONBUTTON_SIZE + theme.spacing(0.5)
+    }
+  }),
+  { name: "SiteSettingsKeys" }
+);
 
 interface SiteSettingsKeysProps {
   disabled: boolean;
diff --git a/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx b/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx
index 62b966d5d..1a47685fc 100644
--- a/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx
+++ b/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx
@@ -32,24 +32,27 @@ const initialForm: FormData = {
   lastName: ""
 };
 
-const useStyles = makeStyles(theme => ({
-  hr: {
-    backgroundColor: "#eaeaea",
-    border: "none",
-    height: 1,
-    marginBottom: 0
-  },
-  sectionTitle: {
-    fontWeight: 600 as 600,
-    marginBottom: theme.spacing(),
-    marginTop: theme.spacing(2)
-  },
-  textFieldGrid: {
-    display: "grid",
-    gridColumnGap: theme.spacing(2),
-    gridTemplateColumns: "1fr 1fr"
-  }
-}));
+const useStyles = makeStyles(
+  theme => ({
+    hr: {
+      backgroundColor: "#eaeaea",
+      border: "none",
+      height: 1,
+      marginBottom: 0
+    },
+    sectionTitle: {
+      fontWeight: 600 as 600,
+      marginBottom: theme.spacing(),
+      marginTop: theme.spacing(2)
+    },
+    textFieldGrid: {
+      display: "grid",
+      gridColumnGap: theme.spacing(2),
+      gridTemplateColumns: "1fr 1fr"
+    }
+  }),
+  { name: "StaffAddMemberDialog" }
+);
 
 interface StaffAddMemberDialogProps {
   confirmButtonState: ConfirmButtonTransitionState;
diff --git a/src/staff/components/StaffList/StaffList.tsx b/src/staff/components/StaffList/StaffList.tsx
index ede1d6b7d..af1df7725 100644
--- a/src/staff/components/StaffList/StaffList.tsx
+++ b/src/staff/components/StaffList/StaffList.tsx
@@ -21,42 +21,45 @@ import {
 import { ListProps } from "@saleor/types";
 import { StaffList_staffUsers_edges_node } from "../../types/StaffList";
 
-const useStyles = makeStyles(theme => ({
-  avatar: {
-    alignItems: "center",
-    borderRadius: "100%",
-    display: "grid",
-    float: "left",
-    height: 47,
-    justifyContent: "center",
-    marginRight: theme.spacing(1),
-    overflow: "hidden",
-    width: 47
-  },
-  avatarDefault: {
-    "& p": {
-      color: "#fff",
-      lineHeight: "47px"
+const useStyles = makeStyles(
+  theme => ({
+    avatar: {
+      alignItems: "center",
+      borderRadius: "100%",
+      display: "grid",
+      float: "left",
+      height: 47,
+      justifyContent: "center",
+      marginRight: theme.spacing(1),
+      overflow: "hidden",
+      width: 47
     },
-    background: theme.palette.primary.main,
-    height: 47,
-    textAlign: "center",
-    width: 47
-  },
-  avatarImage: {
-    pointerEvents: "none",
-    width: "100%"
-  },
-  statusText: {
-    color: "#9E9D9D"
-  },
-  tableRow: {
-    cursor: "pointer"
-  },
-  wideColumn: {
-    width: "80%"
-  }
-}));
+    avatarDefault: {
+      "& p": {
+        color: "#fff",
+        lineHeight: "47px"
+      },
+      background: theme.palette.primary.main,
+      height: 47,
+      textAlign: "center",
+      width: 47
+    },
+    avatarImage: {
+      pointerEvents: "none",
+      width: "100%"
+    },
+    statusText: {
+      color: "#9E9D9D"
+    },
+    tableRow: {
+      cursor: "pointer"
+    },
+    wideColumn: {
+      width: "80%"
+    }
+  }),
+  { name: "StaffList" }
+);
 
 interface StaffListProps extends ListProps {
   staffMembers: StaffList_staffUsers_edges_node[];
diff --git a/src/taxes/components/CountryList/CountryList.tsx b/src/taxes/components/CountryList/CountryList.tsx
index 6eeeabb88..5cd6b39c1 100644
--- a/src/taxes/components/CountryList/CountryList.tsx
+++ b/src/taxes/components/CountryList/CountryList.tsx
@@ -13,14 +13,17 @@ import Skeleton from "@saleor/components/Skeleton";
 import { maybe, renderCollection } from "../../../misc";
 import { CountryList_shop_countries } from "../../types/CountryList";
 
-const useStyles = makeStyles({
-  tableRow: {
-    cursor: "pointer"
+const useStyles = makeStyles(
+  {
+    tableRow: {
+      cursor: "pointer"
+    },
+    textRight: {
+      textAlign: "right"
+    }
   },
-  textRight: {
-    textAlign: "right"
-  }
-});
+  { name: "CountryList" }
+);
 
 interface CountryListProps {
   countries: CountryList_shop_countries[];
diff --git a/src/taxes/components/CountryTaxesPage/CountryTaxesPage.tsx b/src/taxes/components/CountryTaxesPage/CountryTaxesPage.tsx
index 93c988c28..e3baff1af 100644
--- a/src/taxes/components/CountryTaxesPage/CountryTaxesPage.tsx
+++ b/src/taxes/components/CountryTaxesPage/CountryTaxesPage.tsx
@@ -18,11 +18,14 @@ import { TaxRateType } from "@saleor/types/globalTypes";
 import { maybe, renderCollection } from "../../../misc";
 import { CountryList_shop_countries_vat_reducedRates } from "../../types/CountryList";
 
-const useStyles = makeStyles({
-  wideColumn: {
-    width: "80%"
-  }
-});
+const useStyles = makeStyles(
+  {
+    wideColumn: {
+      width: "80%"
+    }
+  },
+  { name: "CountryTaxesPage" }
+);
 
 function translateTaxRates(intl: IntlShape): Record<TaxRateType, string> {
   return {
diff --git a/src/taxes/components/TaxConfiguration/TaxConfiguration.tsx b/src/taxes/components/TaxConfiguration/TaxConfiguration.tsx
index f448b0e6d..24171125a 100644
--- a/src/taxes/components/TaxConfiguration/TaxConfiguration.tsx
+++ b/src/taxes/components/TaxConfiguration/TaxConfiguration.tsx
@@ -20,11 +20,14 @@ interface TaxConfigurationProps {
   onTaxFetch: () => void;
 }
 
-const useStyles = makeStyles({
-  content: {
-    paddingBottom: 0
-  }
-});
+const useStyles = makeStyles(
+  {
+    content: {
+      paddingBottom: 0
+    }
+  },
+  { name: "TaxConfiguration" }
+);
 
 export const TaxConfiguration: React.FC<TaxConfigurationProps> = props => {
   const { data, disabled, onChange, onTaxFetch } = props;
diff --git a/src/translations/components/TranslationFields/TranslationFields.tsx b/src/translations/components/TranslationFields/TranslationFields.tsx
index cd1a96e2c..966eb0aa6 100644
--- a/src/translations/components/TranslationFields/TranslationFields.tsx
+++ b/src/translations/components/TranslationFields/TranslationFields.tsx
@@ -39,68 +39,71 @@ export interface TranslationFieldsProps {
   onSubmit: (field: string, data: string) => void;
 }
 
-const useStyles = makeStyles(theme => ({
-  cardCaption: {
-    fontSize: 14
-  },
-  cardContent: {
-    "&:last-child": {
-      paddingBottom: theme.spacing(1)
-    }
-  },
-  columnHeader: {
-    marginBottom: theme.spacing(0.5)
-  },
-  content: {
-    "& a": {
-      color: theme.palette.secondary.light
+const useStyles = makeStyles(
+  theme => ({
+    cardCaption: {
+      fontSize: 14
     },
-    "& blockquote": {
-      borderLeft: `2px solid ${theme.palette.divider}`,
-      margin: 0,
-      padding: theme.spacing(1, 2)
-    },
-    "& h2": {
-      fontSize: 22,
-      marginBottom: theme.spacing(1)
-    },
-    "& h3": {
-      fontSize: 19,
-      marginBottom: theme.spacing(1)
-    },
-    "& p": {
+    cardContent: {
       "&:last-child": {
-        marginBottom: 0
-      },
-      marginBottom: theme.spacing(),
-      marginTop: 0
+        paddingBottom: theme.spacing(1)
+      }
+    },
+    columnHeader: {
+      marginBottom: theme.spacing(0.5)
+    },
+    content: {
+      "& a": {
+        color: theme.palette.secondary.light
+      },
+      "& blockquote": {
+        borderLeft: `2px solid ${theme.palette.divider}`,
+        margin: 0,
+        padding: theme.spacing(1, 2)
+      },
+      "& h2": {
+        fontSize: 22,
+        marginBottom: theme.spacing(1)
+      },
+      "& h3": {
+        fontSize: 19,
+        marginBottom: theme.spacing(1)
+      },
+      "& p": {
+        "&:last-child": {
+          marginBottom: 0
+        },
+        marginBottom: theme.spacing(),
+        marginTop: 0
+      },
+      paddingBottom: theme.spacing(2)
+    },
+    editButtonContainer: {
+      alignItems: "center",
+      display: "flex",
+      justifyContent: "flex-end"
+    },
+    fieldName: {
+      color: theme.typography.caption.color,
+      fontSize: 14,
+      fontWeight: 500,
+      marginBottom: theme.spacing(),
+      marginTop: theme.spacing(2),
+      textTransform: "uppercase"
+    },
+    grid: {
+      gridRowGap: 0
+    },
+    hr: {
+      gridColumnEnd: "span 2"
     },
-    paddingBottom: theme.spacing(2)
-  },
-  editButtonContainer: {
-    alignItems: "center",
-    display: "flex",
-    justifyContent: "flex-end"
-  },
-  fieldName: {
-    color: theme.typography.caption.color,
-    fontSize: 14,
-    fontWeight: 500,
-    marginBottom: theme.spacing(),
-    marginTop: theme.spacing(2),
-    textTransform: "uppercase"
-  },
-  grid: {
-    gridRowGap: 0
-  },
-  hr: {
-    gridColumnEnd: "span 2"
-  },
 
-  rotate: {
-    transform: "rotate(180deg)"
-  }
-}));
+    rotate: {
+      transform: "rotate(180deg)"
+    }
+  }),
+  { name: "TranslationFields" }
+);
 const TranslationFields: React.FC<TranslationFieldsProps> = props => {
   const {
     activeField,
diff --git a/src/translations/components/TranslationsEntitiesList/TranslationsEntitiesList.tsx b/src/translations/components/TranslationsEntitiesList/TranslationsEntitiesList.tsx
index 60d632900..22cd550ad 100644
--- a/src/translations/components/TranslationsEntitiesList/TranslationsEntitiesList.tsx
+++ b/src/translations/components/TranslationsEntitiesList/TranslationsEntitiesList.tsx
@@ -30,17 +30,20 @@ export interface TranslationsEntitiesListProps
   onRowClick: (code: string) => void;
 }
 
-const useStyles = makeStyles({
-  tableRow: {
-    cursor: "pointer"
+const useStyles = makeStyles(
+  {
+    tableRow: {
+      cursor: "pointer"
+    },
+    textRight: {
+      textAlign: "right"
+    },
+    wideColumn: {
+      width: "80%"
+    }
   },
-  textRight: {
-    textAlign: "right"
-  },
-  wideColumn: {
-    width: "80%"
-  }
-});
+  { name: "TranslationsEntitiesList" }
+);
 const TranslationsEntitiesList: React.FC<
   TranslationsEntitiesListProps
 > = props => {
diff --git a/src/translations/components/TranslationsLanguageList/TranslationsLanguageList.tsx b/src/translations/components/TranslationsLanguageList/TranslationsLanguageList.tsx
index e613d7a72..0175dc59f 100644
--- a/src/translations/components/TranslationsLanguageList/TranslationsLanguageList.tsx
+++ b/src/translations/components/TranslationsLanguageList/TranslationsLanguageList.tsx
@@ -17,14 +17,17 @@ export interface TranslationsLanguageListProps {
   onRowClick: (code: string) => void;
 }
 
-const useStyles = makeStyles({
-  capitalize: {
-    textTransform: "capitalize"
+const useStyles = makeStyles(
+  {
+    capitalize: {
+      textTransform: "capitalize"
+    },
+    link: {
+      cursor: "pointer"
+    }
   },
-  link: {
-    cursor: "pointer"
-  }
-});
+  { name: "TranslationsLanguageList" }
+);
 
 const TranslationsLanguageList: React.FC<
   TranslationsLanguageListProps
diff --git a/src/webhooks/components/WebhookInfo/WebhookInfo.tsx b/src/webhooks/components/WebhookInfo/WebhookInfo.tsx
index 709659a5e..526465e71 100644
--- a/src/webhooks/components/WebhookInfo/WebhookInfo.tsx
+++ b/src/webhooks/components/WebhookInfo/WebhookInfo.tsx
@@ -30,16 +30,19 @@ interface WebhookInfoProps {
   fetchServiceAccounts: (data: string) => void;
 }
 
-const useStyles = makeStyles(() => ({
-  status: {
-    paddingTop: 20
-  },
-  title: {
-    fontSize: 16,
-    lineHeight: 1.9,
-    paddingBottom: 10
-  }
-}));
+const useStyles = makeStyles(
+  () => ({
+    status: {
+      paddingTop: 20
+    },
+    title: {
+      fontSize: 16,
+      lineHeight: 1.9,
+      paddingBottom: 10
+    }
+  }),
+  { name: "WebhookInfo" }
+);
 
 const WebhookInfo: React.FC<WebhookInfoProps> = ({
   apiErrors,
diff --git a/src/webhooks/components/WebhooksList/WebhooksList.tsx b/src/webhooks/components/WebhooksList/WebhooksList.tsx
index 2b9015983..5f53cd37e 100644
--- a/src/webhooks/components/WebhooksList/WebhooksList.tsx
+++ b/src/webhooks/components/WebhooksList/WebhooksList.tsx
@@ -22,34 +22,37 @@ export interface WebhooksListProps extends ListProps {
   onRemove: (id: string) => void;
 }
 
-const useStyles = makeStyles(theme => ({
-  [theme.breakpoints.up("lg")]: {
-    colAction: {
-      "& svg": {
-        color: theme.palette.primary.main
+const useStyles = makeStyles(
+  theme => ({
+    [theme.breakpoints.up("lg")]: {
+      colAction: {
+        "& svg": {
+          color: theme.palette.primary.main
+        },
+        textAlign: "right" as "right"
       },
-      textAlign: "right" as "right"
+      colActive: {},
+      colName: {
+        "&&": {
+          width: "auto"
+        }
+      }
     },
+    colAction: {},
     colActive: {},
     colName: {
-      "&&": {
-        width: "auto"
-      }
+      paddingLeft: 0,
+      width: 250
+    },
+    table: {
+      tableLayout: "fixed"
+    },
+    tableRow: {
+      cursor: "pointer"
     }
-  },
-  colAction: {},
-  colActive: {},
-  colName: {
-    paddingLeft: 0,
-    width: 250
-  },
-  table: {
-    tableLayout: "fixed"
-  },
-  tableRow: {
-    cursor: "pointer"
-  }
-}));
+  }),
+  { name: "WebhooksList" }
+);
 
 const numberOfColumns = 3;