import mui components

src/Theme.ts

@@ -1,4 +1,4 @@
-import { createMuiTheme } from "@material-ui/core";
+import createMuiTheme from "@material-ui/core/styles/createMuiTheme";
 
 const Theme = createMuiTheme({
   spacing: 4,

src/components/ColumnDrawer.tsx

@@ -1,18 +1,17 @@
 import React, { useState, useEffect } from "react";
 import _camelCase from "lodash/camelCase";
 
-import {
-  makeStyles,
-  createStyles,
-  Drawer,
-  List,
-  Divider,
-  ListItem,
-  ListItemIcon,
-  ListItemText,
-  IconButton,
-  TextField,
-} from "@material-ui/core";
+import makeStyles from "@material-ui/core/styles/makeStyles";
+import createStyles from "@material-ui/core/styles/createStyles";
+import Drawer from "@material-ui/core/Drawer";
+import List from "@material-ui/core/List";
+import Divider from "@material-ui/core/Divider";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemText from "@material-ui/core/ListItemText";
+import IconButton from "@material-ui/core/IconButton";
+import TextField from "@material-ui/core/TextField";
+
 import AddIcon from "@material-ui/icons/Add";
 
 import { FIELDS } from "./Fields";

src/components/Confirmation.tsx

@@ -7,7 +7,7 @@ import DialogContent from "@material-ui/core/DialogContent";
 import DialogContentText from "@material-ui/core/DialogContentText";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import TextField from "@material-ui/core/TextField";
-import { makeStyles, createStyles } from "@material-ui/core";
+import { makeStyles, createStyles } from "@material-ui/core/styles";
 
 const useStyles = makeStyles(theme =>
   createStyles({

src/components/CreateTableDialog.tsx

@@ -2,16 +2,14 @@ import React, { useState, useEffect } from "react";
 import AddIcon from "@material-ui/icons/Add";
 import _camelCase from "lodash/camelCase";
 import useRouter from "../hooks/useRouter";
-import {
-  Button,
-  TextField,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-  Fab,
-} from "@material-ui/core";
+import Button from "@material-ui/core/Button";
+import TextField from "@material-ui/core/TextField";
+import Dialog from "@material-ui/core/Dialog";
+import DialogActions from "@material-ui/core/DialogActions";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogContentText from "@material-ui/core/DialogContentText";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import Fab from "@material-ui/core/Fab";
 
 // TODO: Create an interface for props
 export default function CreateTableDialog(props: any) {

src/components/Fields/CheckBox.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { Checkbox } from "@material-ui/core";
+import Checkbox from "@material-ui/core/Checkbox";
 
 // TODO: Create an interface for props
 interface Props {

src/components/Fields/MultiSelect.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { Select } from "@material-ui/core";
+import Select from "@material-ui/core/Select";
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
 
 import Input from "@material-ui/core/Input";

src/components/Fields/Number.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { TextField } from "@material-ui/core";
+import TextField from "@material-ui/core/TextField";
 
 // TODO: Create an interface for props
 const Number = (props: any) => {

src/components/ImportCSV.tsx

@@ -2,17 +2,17 @@ import React, { useState, useCallback } from "react";
 import _camelCase from "lodash/camelCase";
 import { useDropzone } from "react-dropzone";
 import parse from "csv-parse";
-import {
-  Button,
-  TextField,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-  Grid,
-  IconButton,
-} from "@material-ui/core";
+
+import Button from "@material-ui/core/Button";
+import TextField from "@material-ui/core/TextField";
+import DialogActions from "@material-ui/core/DialogActions";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogContentText from "@material-ui/core/DialogContentText";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import Grid from "@material-ui/core/Grid";
+import IconButton from "@material-ui/core/IconButton";
+import Dialog from "@material-ui/core/Dialog";
+
 import Select from "@material-ui/core/Select";
 import FormControl from "@material-ui/core/FormControl";
 import InputLabel from "@material-ui/core/InputLabel";
@@ -21,7 +21,7 @@ import AddCSVIcon from "@material-ui/icons/PlaylistAdd";
 import ArrowIcon from "@material-ui/icons/TrendingFlatOutlined";
 import AddIcon from "@material-ui/icons/Add";
 import DeleteIcon from "@material-ui/icons/Delete";
-import { makeStyles, createStyles } from "@material-ui/core";
+import { makeStyles, createStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 
 import CloudIcon from "@material-ui/icons/CloudUpload";

src/components/Navigation.tsx

@@ -1,14 +1,14 @@
 import React from "react";
 
-import {
-  makeStyles,
-  createStyles,
-  AppBar,
-  CssBaseline,
-  Toolbar,
-  IconButton,
-  Button,
-} from "@material-ui/core";
+import CssBaseline from "@material-ui/core/CssBaseline";
+import createStyles from "@material-ui/core/styles/createStyles";
+import makeStyles from "@material-ui/core/styles/makeStyles";
+
+import AppBar from "@material-ui/core/AppBar";
+import Toolbar from "@material-ui/core/Toolbar";
+import IconButton from "@material-ui/core/IconButton";
+import Button from "@material-ui/core/Button";
+
 import MenuIcon from "@material-ui/icons/Menu";
 import Skeleton from "@material-ui/lab/Skeleton";
 

src/components/SearchBox.tsx

@@ -10,7 +10,7 @@ import Paper from "@material-ui/core/Paper";
 import Modal from "@material-ui/core/Modal";
 import Backdrop from "@material-ui/core/Backdrop";
 import Fade from "@material-ui/core/Fade";
-import { TextField } from "@material-ui/core";
+import TextField from "@material-ui/core/TextField";
 
 const searchClient = algoliasearch(
   process.env.REACT_APP_ALGOLIA_APP_ID

src/components/Table/ColumnEditor/DocInput.tsx

@@ -1,7 +1,11 @@
 import React, { useContext, useEffect, useState } from "react";
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
 import Chip from "@material-ui/core/Chip";
-import { TextField, Grid, Divider, Select } from "@material-ui/core";
+import Grid from "@material-ui/core/Grid";
+import TextField from "@material-ui/core/TextField";
+import Divider from "@material-ui/core/Divider";
+import Select from "@material-ui/core/Select";
+
 import TablesContext from "../../../contexts/tablesContext";
 import MenuItem from "@material-ui/core/MenuItem";
 import useTableConfig from "../../../hooks/useFiretable/useTableConfig";

src/components/Table/ColumnEditor/SelectOptionsInput.tsx

@@ -1,7 +1,9 @@
 import React, { useEffect, useState } from "react";
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
 import Chip from "@material-ui/core/Chip";
-import { TextField, Grid, Divider } from "@material-ui/core";
+import TextField from "@material-ui/core/TextField";
+import Grid from "@material-ui/core/Grid";
+import Divider from "@material-ui/core/Divider";
 import _includes from "lodash/includes";
 import _camelCase from "lodash/camelCase";
 

src/components/Table/ColumnEditor/index.tsx

@@ -9,9 +9,11 @@ import FormControl from "@material-ui/core/FormControl";
 import Popper from "@material-ui/core/Popper";
 import Fade from "@material-ui/core/Fade";
 import Paper from "@material-ui/core/Paper";
+import TextField from "@material-ui/core/TextField";
+import Grid from "@material-ui/core/Grid";
+import Select from "@material-ui/core/Select";
 import ClickAwayListener from "@material-ui/core/ClickAwayListener";
 import { createStyles, makeStyles } from "@material-ui/core/styles";
-import { TextField, Grid, Select } from "@material-ui/core";
 import { FieldsDropDown, isFieldType, FieldType } from "../../Fields";
 import ToggleButton from "@material-ui/lab/ToggleButton";
 import ToggleButtonGroup from "@material-ui/lab/ToggleButtonGroup";

src/views/AuthView.tsx

@@ -1,13 +1,11 @@
 import React from "react";
 
-import {
-  makeStyles,
-  createStyles,
-  Card,
-  CardContent,
-  Button,
-  Typography,
-} from "@material-ui/core";
+import createStyles from "@material-ui/core/styles/createStyles";
+import makeStyles from "@material-ui/core/styles/makeStyles";
+import Card from "@material-ui/core/Card";
+import CardContent from "@material-ui/core/CardContent";
+import Button from "@material-ui/core/Button";
+import Typography from "@material-ui/core/Typography";
 
 import { googleProvider, auth } from "../firebase";
 import useRouter from "../hooks/useRouter";

src/views/TablesView.tsx

@@ -1,15 +1,13 @@
 import React from "react";
 
-import {
-  makeStyles,
-  createStyles,
-  Card,
-  CardActions,
-  CardContent,
-  Button,
-  Typography,
-  Grid,
-} from "@material-ui/core";
+import createStyles from "@material-ui/core/styles/createStyles";
+import makeStyles from "@material-ui/core/styles/makeStyles";
+import Card from "@material-ui/core/Card";
+import CardActions from "@material-ui/core/CardActions";
+import CardContent from "@material-ui/core/CardContent";
+import Button from "@material-ui/core/Button";
+import Typography from "@material-ui/core/Typography";
+import Grid from "@material-ui/core/Grid";
 
 import useSettings from "../hooks/useSettings";
 import useRouter from "../hooks/useRouter";