From 26837a75597182420313dcc7abb1498178b69c27 Mon Sep 17 00:00:00 2001 From: Nikolai Prokoschenko Date: Fri, 26 Jun 2020 10:40:18 +0200 Subject: [PATCH] Avoid import errors when tree-shaking @material-ui @material-ui documents some tree-shaking performance optimizations at https://material-ui.com/guides/minimizing-bundle-size/. Any downstream project using both Material-UI and react-admin implementing this recommendations will encounter errors like Cannot find module: '@material-ui/core/esm/createMuiTheme'. Make sure this package is installed. This is apparently due to the way @material-ui re-exports styling exports via @material-ui/core. The official recommendation is to import via @material-ui/core/styles, which is what this commit is doing for makeStyles and createMuiTheme. Also included: ESLint configuration forbidding these two imports. --- .eslintrc | 19 ++++++++++++++++++- examples/demo/src/categories/CategoryList.tsx | 3 ++- examples/demo/src/orders/OrderList.tsx | 11 +++-------- examples/demo/src/reviews/ReviewList.tsx | 3 ++- examples/demo/src/reviews/StarRatingField.tsx | 2 +- examples/demo/src/visitors/SegmentsField.tsx | 2 +- examples/demo/src/visitors/VisitorList.tsx | 3 ++- .../demo/src/visitors/VisitorListAside.tsx | 3 ++- examples/simple/src/Layout.js | 3 ++- examples/simple/src/comments/CommentList.js | 2 +- examples/simple/src/posts/PostList.js | 3 ++- examples/simple/src/tags/TagList.js | 2 +- packages/ra-input-rich-text/src/index.tsx | 2 +- packages/ra-ui-materialui/src/auth/Login.tsx | 9 ++------- packages/ra-ui-materialui/src/auth/Logout.tsx | 4 ++-- .../src/button/Button.spec.tsx | 3 ++- .../ra-ui-materialui/src/button/Button.tsx | 2 +- .../src/button/CloneButton.spec.tsx | 3 ++- .../src/button/CreateButton.spec.tsx | 3 ++- .../src/button/CreateButton.tsx | 3 ++- .../button/DeleteWithConfirmButton.spec.tsx | 3 ++- .../src/button/DeleteWithUndoButton.spec.tsx | 3 ++- .../src/button/SaveButton.spec.tsx | 3 ++- .../src/input/AutocompleteArrayInput.tsx | 3 ++- .../src/input/AutocompleteInput.tsx | 3 ++- .../src/input/AutocompleteSuggestionItem.tsx | 3 ++- .../src/input/AutocompleteSuggestionList.tsx | 3 ++- .../src/input/FileInputPreview.tsx | 2 +- .../src/input/RadioButtonGroupInput.tsx | 2 +- .../src/input/SearchInput.tsx | 3 ++- .../src/input/SelectArrayInput.tsx | 2 +- .../ra-ui-materialui/src/layout/AppBar.js | 3 ++- packages/ra-ui-materialui/src/layout/Menu.tsx | 3 ++- .../ra-ui-materialui/src/layout/Sidebar.js | 3 ++- .../src/list/FilterButton.spec.js | 2 +- .../src/list/Pagination.spec.js | 2 +- 36 files changed, 78 insertions(+), 50 deletions(-) diff --git a/.eslintrc b/.eslintrc index e9c7b35a150..b8fd7609efd 100644 --- a/.eslintrc +++ b/.eslintrc @@ -17,6 +17,23 @@ ], "rules": { "no-use-before-define": "off", - "prettier/prettier": "error" + "prettier/prettier": "error", + "no-restricted-imports": [ + "error", + { + "paths": [ + { + "name": "@material-ui/core", + "importNames": ["makeStyles"], + "message": "Please import makeStyles from @material-ui/core/styles instead. See https://material-ui.com/guides/minimizing-bundle-size/#option-2 for more information" + }, + { + "name": "@material-ui/core", + "importNames": ["createMuiTheme"], + "message": "Please import createMuiTheme from @material-ui/core/styles instead. See https://material-ui.com/guides/minimizing-bundle-size/#option-2 for more information" + } + ] + } + ] } } diff --git a/examples/demo/src/categories/CategoryList.tsx b/examples/demo/src/categories/CategoryList.tsx index 6a3e4364ec4..c75d5a84dda 100644 --- a/examples/demo/src/categories/CategoryList.tsx +++ b/examples/demo/src/categories/CategoryList.tsx @@ -10,9 +10,10 @@ import { CardContent, CardActions, Typography, - makeStyles, } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; + import LinkToRelatedProducts from './LinkToRelatedProducts'; import { Category } from '../types'; diff --git a/examples/demo/src/orders/OrderList.tsx b/examples/demo/src/orders/OrderList.tsx index 1c6a9bcd067..44db4f86813 100644 --- a/examples/demo/src/orders/OrderList.tsx +++ b/examples/demo/src/orders/OrderList.tsx @@ -15,14 +15,9 @@ import { TextField, TextInput, } from 'react-admin'; -import { - makeStyles, - useMediaQuery, - Divider, - Tabs, - Tab, - Theme, -} from '@material-ui/core'; +import { useMediaQuery, Divider, Tabs, Tab, Theme } from '@material-ui/core'; + +import { makeStyles } from '@material-ui/core/styles'; import NbItemsField from './NbItemsField'; import CustomerReferenceField from '../visitors/CustomerReferenceField'; diff --git a/examples/demo/src/reviews/ReviewList.tsx b/examples/demo/src/reviews/ReviewList.tsx index e3cb95c7aca..3534be20d6a 100644 --- a/examples/demo/src/reviews/ReviewList.tsx +++ b/examples/demo/src/reviews/ReviewList.tsx @@ -3,7 +3,8 @@ import { Fragment, useCallback, FC } from 'react'; import classnames from 'classnames'; import { BulkDeleteButton, List } from 'react-admin'; import { Route, RouteChildrenProps, useHistory } from 'react-router-dom'; -import { Drawer, useMediaQuery, makeStyles, Theme } from '@material-ui/core'; +import { Drawer, useMediaQuery, Theme } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; import BulkAcceptButton from './BulkAcceptButton'; import BulkRejectButton from './BulkRejectButton'; import ReviewListMobile from './ReviewListMobile'; diff --git a/examples/demo/src/reviews/StarRatingField.tsx b/examples/demo/src/reviews/StarRatingField.tsx index 15b6aa82db6..baee9fdb850 100644 --- a/examples/demo/src/reviews/StarRatingField.tsx +++ b/examples/demo/src/reviews/StarRatingField.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { FC } from 'react'; import Icon from '@material-ui/icons/Stars'; -import { makeStyles } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; import { FieldProps } from '../types'; diff --git a/examples/demo/src/visitors/SegmentsField.tsx b/examples/demo/src/visitors/SegmentsField.tsx index 0bd35a976e5..11edc006154 100644 --- a/examples/demo/src/visitors/SegmentsField.tsx +++ b/examples/demo/src/visitors/SegmentsField.tsx @@ -4,7 +4,7 @@ import Chip from '@material-ui/core/Chip'; import { useTranslate } from 'react-admin'; import segments from '../segments/data'; import { FieldProps, Customer } from '../types'; -import { makeStyles } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; const useStyles = makeStyles({ main: { diff --git a/examples/demo/src/visitors/VisitorList.tsx b/examples/demo/src/visitors/VisitorList.tsx index 363788cc203..614d7b332aa 100644 --- a/examples/demo/src/visitors/VisitorList.tsx +++ b/examples/demo/src/visitors/VisitorList.tsx @@ -10,7 +10,8 @@ import { NumberField, SearchInput, } from 'react-admin'; -import { useMediaQuery, makeStyles, Theme } from '@material-ui/core'; +import { useMediaQuery, Theme } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; import SegmentsField from './SegmentsField'; import SegmentInput from './SegmentInput'; diff --git a/examples/demo/src/visitors/VisitorListAside.tsx b/examples/demo/src/visitors/VisitorListAside.tsx index a1f8fa3c543..b2af91b63d0 100644 --- a/examples/demo/src/visitors/VisitorListAside.tsx +++ b/examples/demo/src/visitors/VisitorListAside.tsx @@ -4,7 +4,6 @@ import { Box, Card, CardContent, - makeStyles, Typography, IconButton, InputAdornment, @@ -13,6 +12,8 @@ import { ListItemText, ListItemSecondaryAction, } from '@material-ui/core'; + +import { makeStyles } from '@material-ui/core/styles'; import SearchIcon from '@material-ui/icons/Search'; import AccessTimeIcon from '@material-ui/icons/AccessTime'; import MonetizationOnIcon from '@material-ui/icons/MonetizationOnOutlined'; diff --git a/examples/simple/src/Layout.js b/examples/simple/src/Layout.js index 7c44b4d8854..5ec04df5fdf 100644 --- a/examples/simple/src/Layout.js +++ b/examples/simple/src/Layout.js @@ -1,7 +1,8 @@ import * as React from 'react'; import { forwardRef } from 'react'; import { Layout, AppBar, UserMenu, useLocale, useSetLocale } from 'react-admin'; -import { makeStyles, MenuItem, ListItemIcon } from '@material-ui/core'; +import { MenuItem, ListItemIcon } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; import Language from '@material-ui/icons/Language'; const useStyles = makeStyles(theme => ({ diff --git a/examples/simple/src/comments/CommentList.js b/examples/simple/src/comments/CommentList.js index 517eb6d3e98..a958bbf8d88 100644 --- a/examples/simple/src/comments/CommentList.js +++ b/examples/simple/src/comments/CommentList.js @@ -12,8 +12,8 @@ import { Grid, Toolbar, useMediaQuery, - makeStyles, } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; import jsonExport from 'jsonexport/dist'; import { DateField, diff --git a/examples/simple/src/posts/PostList.js b/examples/simple/src/posts/PostList.js index 2f06f3598c0..e95624c7da3 100644 --- a/examples/simple/src/posts/PostList.js +++ b/examples/simple/src/posts/PostList.js @@ -2,7 +2,8 @@ import * as React from 'react'; import { Children, Fragment, cloneElement, memo } from 'react'; import BookIcon from '@material-ui/icons/Book'; import Chip from '@material-ui/core/Chip'; -import { useMediaQuery, makeStyles } from '@material-ui/core'; +import { useMediaQuery } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; import lodashGet from 'lodash/get'; import jsonExport from 'jsonexport/dist'; import { diff --git a/examples/simple/src/tags/TagList.js b/examples/simple/src/tags/TagList.js index 9d358ef8ab5..246b3f01f05 100644 --- a/examples/simple/src/tags/TagList.js +++ b/examples/simple/src/tags/TagList.js @@ -8,8 +8,8 @@ import { ListItemSecondaryAction, Collapse, Card, - makeStyles, } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; import ExpandLess from '@material-ui/icons/ExpandLess'; import ExpandMore from '@material-ui/icons/ExpandMore'; diff --git a/packages/ra-input-rich-text/src/index.tsx b/packages/ra-input-rich-text/src/index.tsx index 388ea9b978d..58b417a1495 100644 --- a/packages/ra-input-rich-text/src/index.tsx +++ b/packages/ra-input-rich-text/src/index.tsx @@ -14,8 +14,8 @@ import { FormControl, InputLabel, PropTypes as MuiPropTypes, - makeStyles, } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; import PropTypes from 'prop-types'; import styles from './styles'; diff --git a/packages/ra-ui-materialui/src/auth/Login.tsx b/packages/ra-ui-materialui/src/auth/Login.tsx index 50f32b5be7e..5a9a2f5a3f7 100644 --- a/packages/ra-ui-materialui/src/auth/Login.tsx +++ b/packages/ra-ui-materialui/src/auth/Login.tsx @@ -7,13 +7,8 @@ import React, { } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import { - Card, - Avatar, - createMuiTheme, - makeStyles, - Theme, -} from '@material-ui/core'; +import { Card, Avatar, Theme } from '@material-ui/core'; +import { createMuiTheme, makeStyles } from '@material-ui/core/styles'; import { ThemeProvider } from '@material-ui/styles'; import LockIcon from '@material-ui/icons/Lock'; import { StaticContext } from 'react-router'; diff --git a/packages/ra-ui-materialui/src/auth/Logout.tsx b/packages/ra-ui-materialui/src/auth/Logout.tsx index 631d1ebf0a2..81713fe9ca7 100644 --- a/packages/ra-ui-materialui/src/auth/Logout.tsx +++ b/packages/ra-ui-materialui/src/auth/Logout.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import { useCallback, FunctionComponent, ReactElement } from 'react'; import PropTypes from 'prop-types'; -import { ListItemIcon, MenuItem, makeStyles } from '@material-ui/core'; +import { ListItemIcon, MenuItem } from '@material-ui/core'; import { MenuItemProps } from '@material-ui/core/MenuItem'; -import { Theme } from '@material-ui/core/styles'; +import { Theme, makeStyles } from '@material-ui/core/styles'; import ExitIcon from '@material-ui/icons/PowerSettingsNew'; import classnames from 'classnames'; diff --git a/packages/ra-ui-materialui/src/button/Button.spec.tsx b/packages/ra-ui-materialui/src/button/Button.spec.tsx index 3f5fa7fa538..f401353d6a0 100644 --- a/packages/ra-ui-materialui/src/button/Button.spec.tsx +++ b/packages/ra-ui-materialui/src/button/Button.spec.tsx @@ -2,7 +2,8 @@ import { render, cleanup } from '@testing-library/react'; import * as React from 'react'; import expect from 'expect'; import { TestContext } from 'ra-core'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core'; +import { ThemeProvider } from '@material-ui/core'; +import { createMuiTheme } from '@material-ui/core/styles'; import Button from './Button'; const theme = createMuiTheme(); diff --git a/packages/ra-ui-materialui/src/button/Button.tsx b/packages/ra-ui-materialui/src/button/Button.tsx index ec88b075312..966afe6a80e 100644 --- a/packages/ra-ui-materialui/src/button/Button.tsx +++ b/packages/ra-ui-materialui/src/button/Button.tsx @@ -6,9 +6,9 @@ import { Tooltip, IconButton, useMediaQuery, - makeStyles, PropTypes as MuiPropTypes, } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; import { ButtonProps as MuiButtonProps } from '@material-ui/core/Button'; import { Theme } from '@material-ui/core'; import classnames from 'classnames'; diff --git a/packages/ra-ui-materialui/src/button/CloneButton.spec.tsx b/packages/ra-ui-materialui/src/button/CloneButton.spec.tsx index b728d5fe716..4a5fc1f302f 100644 --- a/packages/ra-ui-materialui/src/button/CloneButton.spec.tsx +++ b/packages/ra-ui-materialui/src/button/CloneButton.spec.tsx @@ -1,5 +1,6 @@ import expect from 'expect'; -import { ThemeProvider, createMuiTheme } from '@material-ui/core'; +import { ThemeProvider } from '@material-ui/core'; +import { createMuiTheme } from '@material-ui/core/styles'; import { cleanup, render } from '@testing-library/react'; import * as React from 'react'; import { createMemoryHistory } from 'history'; diff --git a/packages/ra-ui-materialui/src/button/CreateButton.spec.tsx b/packages/ra-ui-materialui/src/button/CreateButton.spec.tsx index 2ced072fb19..26ef1fc7dad 100644 --- a/packages/ra-ui-materialui/src/button/CreateButton.spec.tsx +++ b/packages/ra-ui-materialui/src/button/CreateButton.spec.tsx @@ -2,7 +2,8 @@ import { render, cleanup } from '@testing-library/react'; import * as React from 'react'; import expect from 'expect'; import { TestContext } from 'ra-core'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core'; +import { ThemeProvider } from '@material-ui/core'; +import { createMuiTheme } from '@material-ui/core/styles'; import CreateButton from './CreateButton'; const invalidButtonDomProps = { diff --git a/packages/ra-ui-materialui/src/button/CreateButton.tsx b/packages/ra-ui-materialui/src/button/CreateButton.tsx index 10c65988e00..5da97336a68 100644 --- a/packages/ra-ui-materialui/src/button/CreateButton.tsx +++ b/packages/ra-ui-materialui/src/button/CreateButton.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; import { FC, ReactElement, memo } from 'react'; import PropTypes from 'prop-types'; -import { Fab, makeStyles, useMediaQuery, Theme } from '@material-ui/core'; +import { Fab, useMediaQuery, Theme } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; import ContentAdd from '@material-ui/icons/Add'; import classnames from 'classnames'; import { Link } from 'react-router-dom'; diff --git a/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.spec.tsx b/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.spec.tsx index 80a03e6a7f2..60f777add53 100644 --- a/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.spec.tsx +++ b/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.spec.tsx @@ -2,7 +2,8 @@ import { render, cleanup } from '@testing-library/react'; import * as React from 'react'; import expect from 'expect'; import { TestContext } from 'ra-core'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core'; +import { ThemeProvider } from '@material-ui/core'; +import { createMuiTheme } from '@material-ui/core/styles'; import DeleteWithConfirmButton from './DeleteWithConfirmButton'; const theme = createMuiTheme(); diff --git a/packages/ra-ui-materialui/src/button/DeleteWithUndoButton.spec.tsx b/packages/ra-ui-materialui/src/button/DeleteWithUndoButton.spec.tsx index 44e92495e04..31bb0b100e1 100644 --- a/packages/ra-ui-materialui/src/button/DeleteWithUndoButton.spec.tsx +++ b/packages/ra-ui-materialui/src/button/DeleteWithUndoButton.spec.tsx @@ -2,7 +2,8 @@ import { render, cleanup } from '@testing-library/react'; import * as React from 'react'; import expect from 'expect'; import { TestContext } from 'ra-core'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core'; +import { ThemeProvider } from '@material-ui/core'; +import { createMuiTheme } from '@material-ui/core/styles'; import DeleteWithUndoButton from './DeleteWithUndoButton'; const theme = createMuiTheme(); diff --git a/packages/ra-ui-materialui/src/button/SaveButton.spec.tsx b/packages/ra-ui-materialui/src/button/SaveButton.spec.tsx index c947b16de91..6f77fed6688 100644 --- a/packages/ra-ui-materialui/src/button/SaveButton.spec.tsx +++ b/packages/ra-ui-materialui/src/button/SaveButton.spec.tsx @@ -7,7 +7,8 @@ import { DataProviderContext, DataProvider, } from 'ra-core'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core'; +import { ThemeProvider } from '@material-ui/core'; +import { createMuiTheme } from '@material-ui/core/styles'; import SaveButton from './SaveButton'; import { Toolbar, SimpleForm } from '../form'; diff --git a/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.tsx b/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.tsx index e9cf4e5e803..d384ea208a0 100644 --- a/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.tsx +++ b/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.tsx @@ -9,7 +9,8 @@ import React, { import Downshift, { DownshiftProps } from 'downshift'; import classNames from 'classnames'; import get from 'lodash/get'; -import { makeStyles, TextField, Chip } from '@material-ui/core'; +import { TextField, Chip } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; import { TextFieldProps } from '@material-ui/core/TextField'; import { useInput, diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx index 9d859457176..54f19053a6c 100644 --- a/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx +++ b/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx @@ -9,7 +9,8 @@ import React, { } from 'react'; import Downshift, { DownshiftProps } from 'downshift'; import get from 'lodash/get'; -import { makeStyles, TextField } from '@material-ui/core'; +import { TextField } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; import { TextFieldProps } from '@material-ui/core/TextField'; import { useInput, diff --git a/packages/ra-ui-materialui/src/input/AutocompleteSuggestionItem.tsx b/packages/ra-ui-materialui/src/input/AutocompleteSuggestionItem.tsx index b00f3497e2e..20ff56be327 100644 --- a/packages/ra-ui-materialui/src/input/AutocompleteSuggestionItem.tsx +++ b/packages/ra-ui-materialui/src/input/AutocompleteSuggestionItem.tsx @@ -2,7 +2,8 @@ import * as React from 'react'; import { FunctionComponent, isValidElement, cloneElement } from 'react'; import parse from 'autosuggest-highlight/parse'; import match from 'autosuggest-highlight/match'; -import { makeStyles, MenuItem } from '@material-ui/core'; +import { MenuItem } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; import { MenuItemProps } from '@material-ui/core/MenuItem'; import classnames from 'classnames'; diff --git a/packages/ra-ui-materialui/src/input/AutocompleteSuggestionList.tsx b/packages/ra-ui-materialui/src/input/AutocompleteSuggestionList.tsx index 547493cdb3d..c0db23e8225 100644 --- a/packages/ra-ui-materialui/src/input/AutocompleteSuggestionList.tsx +++ b/packages/ra-ui-materialui/src/input/AutocompleteSuggestionList.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { ReactNode, FunctionComponent } from 'react'; -import { makeStyles, Paper, Popper } from '@material-ui/core'; +import { Paper, Popper } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; const useStyles = makeStyles( { diff --git a/packages/ra-ui-materialui/src/input/FileInputPreview.tsx b/packages/ra-ui-materialui/src/input/FileInputPreview.tsx index 7470b3a643e..dc4ebf2db8c 100644 --- a/packages/ra-ui-materialui/src/input/FileInputPreview.tsx +++ b/packages/ra-ui-materialui/src/input/FileInputPreview.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useEffect, ReactNode, FunctionComponent } from 'react'; import PropTypes from 'prop-types'; -import { makeStyles } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; import RemoveCircle from '@material-ui/icons/RemoveCircle'; import IconButton from '@material-ui/core/IconButton'; import { useTranslate } from 'ra-core'; diff --git a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx index bf1f13c429a..3bf8c1625d6 100644 --- a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx +++ b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx @@ -2,12 +2,12 @@ import * as React from 'react'; import { FunctionComponent } from 'react'; import PropTypes from 'prop-types'; import { - makeStyles, FormControl, FormHelperText, FormLabel, RadioGroup, } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; import { RadioGroupProps } from '@material-ui/core/RadioGroup'; import { FormControlProps } from '@material-ui/core/FormControl'; import get from 'lodash/get'; diff --git a/packages/ra-ui-materialui/src/input/SearchInput.tsx b/packages/ra-ui-materialui/src/input/SearchInput.tsx index 5002fd4a7e8..806898a4acf 100644 --- a/packages/ra-ui-materialui/src/input/SearchInput.tsx +++ b/packages/ra-ui-materialui/src/input/SearchInput.tsx @@ -2,7 +2,8 @@ import * as React from 'react'; import { FunctionComponent } from 'react'; import PropTypes from 'prop-types'; import SearchIcon from '@material-ui/icons/Search'; -import { makeStyles, InputAdornment } from '@material-ui/core'; +import { InputAdornment } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; import { TextFieldProps } from '@material-ui/core/TextField'; import { useTranslate, InputProps } from 'ra-core'; diff --git a/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx b/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx index 8207dcfdeea..eec311a2d95 100644 --- a/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx +++ b/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx @@ -8,7 +8,6 @@ import { } from 'react'; import PropTypes from 'prop-types'; import { - makeStyles, Select, MenuItem, InputLabel, @@ -16,6 +15,7 @@ import { FormControl, Chip, } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; import classnames from 'classnames'; import { FieldTitle, diff --git a/packages/ra-ui-materialui/src/layout/AppBar.js b/packages/ra-ui-materialui/src/layout/AppBar.js index 5567d352aa4..9c297ecb9ab 100644 --- a/packages/ra-ui-materialui/src/layout/AppBar.js +++ b/packages/ra-ui-materialui/src/layout/AppBar.js @@ -9,9 +9,10 @@ import { Toolbar, Tooltip, Typography, - makeStyles, useMediaQuery, } from '@material-ui/core'; + +import { makeStyles } from '@material-ui/core/styles'; import MenuIcon from '@material-ui/icons/Menu'; import { toggleSidebar, useTranslate } from 'ra-core'; diff --git a/packages/ra-ui-materialui/src/layout/Menu.tsx b/packages/ra-ui-materialui/src/layout/Menu.tsx index 9ab6fef5423..a87561b81a7 100644 --- a/packages/ra-ui-materialui/src/layout/Menu.tsx +++ b/packages/ra-ui-materialui/src/layout/Menu.tsx @@ -4,7 +4,8 @@ import PropTypes from 'prop-types'; import { shallowEqual, useSelector } from 'react-redux'; // @ts-ignore import inflection from 'inflection'; -import { makeStyles, useMediaQuery, Theme } from '@material-ui/core'; +import { useMediaQuery, Theme } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; import DefaultIcon from '@material-ui/icons/ViewList'; import classnames from 'classnames'; import { getResources, useTranslate, Translate, ReduxState } from 'ra-core'; diff --git a/packages/ra-ui-materialui/src/layout/Sidebar.js b/packages/ra-ui-materialui/src/layout/Sidebar.js index 40409aa4d33..ec0374d4445 100644 --- a/packages/ra-ui-materialui/src/layout/Sidebar.js +++ b/packages/ra-ui-materialui/src/layout/Sidebar.js @@ -2,7 +2,8 @@ import * as React from 'react'; import { Children, cloneElement } from 'react'; import PropTypes from 'prop-types'; import { useDispatch, useSelector } from 'react-redux'; -import { Drawer, makeStyles, useMediaQuery } from '@material-ui/core'; +import { Drawer, useMediaQuery } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; import lodashGet from 'lodash/get'; import { setSidebarVisibility } from 'ra-core'; diff --git a/packages/ra-ui-materialui/src/list/FilterButton.spec.js b/packages/ra-ui-materialui/src/list/FilterButton.spec.js index 2d7b6a6efa4..a74da35004d 100644 --- a/packages/ra-ui-materialui/src/list/FilterButton.spec.js +++ b/packages/ra-ui-materialui/src/list/FilterButton.spec.js @@ -2,7 +2,7 @@ import * as React from 'react'; import expect from 'expect'; import { render, cleanup, fireEvent } from '@testing-library/react'; import { ThemeProvider } from '@material-ui/styles'; -import { createMuiTheme } from '@material-ui/core'; +import { createMuiTheme } from '@material-ui/core/styles'; import FilterButton from './FilterButton'; import TextInput from '../input/TextInput'; diff --git a/packages/ra-ui-materialui/src/list/Pagination.spec.js b/packages/ra-ui-materialui/src/list/Pagination.spec.js index 623e26104de..9590a4c14a6 100644 --- a/packages/ra-ui-materialui/src/list/Pagination.spec.js +++ b/packages/ra-ui-materialui/src/list/Pagination.spec.js @@ -2,7 +2,7 @@ import * as React from 'react'; import expect from 'expect'; import { render, cleanup } from '@testing-library/react'; import { ThemeProvider } from '@material-ui/styles'; -import { createMuiTheme } from '@material-ui/core'; +import { createMuiTheme } from '@material-ui/core/styles'; import Pagination from './Pagination'; import DeviceTestWrapper from '../layout/DeviceTestWrapper';