From 3446ea0f20c2246e8089f376f6e4e1f40b01c25e Mon Sep 17 00:00:00 2001
From: zyhou <richard.maxime9@gmail.com>
Date: Wed, 12 Jun 2019 14:49:40 +0200
Subject: [PATCH 1/2] Use makeStyles hooks on examples demo

---
 .../src/categories/LinkToRelatedProducts.js   |  11 +-
 .../demo/src/configuration/Configuration.js   |  18 +-
 examples/demo/src/dashboard/CardIcon.js       |  21 +-
 examples/demo/src/dashboard/MonthlyRevenue.js |  11 +-
 examples/demo/src/dashboard/NbNewOrders.js    |  11 +-
 examples/demo/src/dashboard/Welcome.js        |  11 +-
 examples/demo/src/layout/AppBar.js            |  35 ++--
 examples/demo/src/orders/MobileGrid.js        |  11 +-
 examples/demo/src/orders/OrderEdit.js         |  70 ++++---
 examples/demo/src/orders/OrderList.js         |  19 +-
 examples/demo/src/products/GridList.js        | 125 ++++++------
 examples/demo/src/products/Poster.js          |  23 ++-
 examples/demo/src/products/ProductCreate.js   | 121 +++++------
 examples/demo/src/products/ProductEdit.js     | 120 +++++------
 examples/demo/src/products/ProductList.js     |  11 +-
 examples/demo/src/products/ThumbnailField.js  |  13 +-
 examples/demo/src/reviews/ReviewEdit.js       |  99 ++++-----
 .../demo/src/reviews/ReviewEditToolbar.js     |  62 +++---
 examples/demo/src/reviews/ReviewFilter.js     |  61 +++---
 .../demo/src/reviews/ReviewListDesktop.js     |  41 ++--
 examples/demo/src/reviews/ReviewListMobile.js | 150 +++++++-------
 .../src/segments/LinkToRelatedCustomers.js    |  11 +-
 examples/demo/src/visitors/MobileGrid.js      |  12 +-
 examples/demo/src/visitors/SegmentInput.js    |  17 +-
 examples/demo/src/visitors/VisitorCreate.js   |  81 ++++----
 examples/demo/src/visitors/VisitorEdit.js     | 188 ++++++++++--------
 examples/demo/src/visitors/VisitorList.js     |  73 +++----
 27 files changed, 748 insertions(+), 678 deletions(-)

diff --git a/examples/demo/src/categories/LinkToRelatedProducts.js b/examples/demo/src/categories/LinkToRelatedProducts.js
index a7c27f338cb..a706dee34d5 100644
--- a/examples/demo/src/categories/LinkToRelatedProducts.js
+++ b/examples/demo/src/categories/LinkToRelatedProducts.js
@@ -1,22 +1,23 @@
 import React from 'react';
 import Button from '@material-ui/core/Button';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import { Link } from 'react-router-dom';
 import { useTranslate } from 'react-admin';
 import { stringify } from 'query-string';
 
 import products from '../products';
 
-const styles = {
+const useStyles = makeStyles({
     icon: { paddingRight: '0.5em' },
     link: {
         display: 'inline-flex',
         alignItems: 'center',
     },
-};
+});
 
-const LinkToRelatedProducts = ({ classes, record }) => {
+const LinkToRelatedProducts = ({ record }) => {
     const translate = useTranslate();
+    const classes = useStyles();
     return (
         <Button
             size="small"
@@ -40,4 +41,4 @@ const LinkToRelatedProducts = ({ classes, record }) => {
     );
 };
 
-export default withStyles(styles)(LinkToRelatedProducts);
+export default LinkToRelatedProducts;
diff --git a/examples/demo/src/configuration/Configuration.js b/examples/demo/src/configuration/Configuration.js
index 47f73f3ff05..a8b5651bb3b 100644
--- a/examples/demo/src/configuration/Configuration.js
+++ b/examples/demo/src/configuration/Configuration.js
@@ -4,23 +4,18 @@ import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
 import Button from '@material-ui/core/Button';
 import { useTranslate, changeLocale, Title } from 'react-admin';
-import withStyles from '@material-ui/core/styles/withStyles';
+import { makeStyles } from '@material-ui/core/styles';
 import compose from 'recompose/compose';
 import { changeTheme } from './actions';
 
-const styles = {
+const useStyles = makeStyles({
     label: { width: '10em', display: 'inline-block' },
     button: { margin: '1em' },
-};
+});
 
-const Configuration = ({
-    classes,
-    theme,
-    locale,
-    changeTheme,
-    changeLocale,
-}) => {
+const Configuration = ({ theme, locale, changeTheme, changeLocale }) => {
     const translate = useTranslate();
+    const classes = useStyles();
     return (
         <Card>
             <Title title={translate('pos.configuration')} />
@@ -80,8 +75,7 @@ const enhance = compose(
             changeLocale,
             changeTheme,
         }
-    ),
-    withStyles(styles)
+    )
 );
 
 export default enhance(Configuration);
diff --git a/examples/demo/src/dashboard/CardIcon.js b/examples/demo/src/dashboard/CardIcon.js
index bd7520371d0..ce34fa42347 100644
--- a/examples/demo/src/dashboard/CardIcon.js
+++ b/examples/demo/src/dashboard/CardIcon.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import Card from '@material-ui/core/Card';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
-const styles = {
+const useStyles = makeStyles({
     card: {
         float: 'left',
         margin: '-20px 20px 0 15px',
@@ -16,12 +16,15 @@ const styles = {
         padding: 14,
         color: '#fff',
     },
-};
+});
 
-const CardIcon = ({ Icon, classes, bgColor }) => (
-    <Card className={classes.card} style={{ backgroundColor: bgColor }}>
-        <Icon className={classes.icon} />
-    </Card>
-);
+const CardIcon = ({ Icon, bgColor }) => {
+    const classes = useStyles();
+    return (
+        <Card className={classes.card} style={{ backgroundColor: bgColor }}>
+            <Icon className={classes.icon} />
+        </Card>
+    );
+};
 
-export default withStyles(styles)(CardIcon);
+export default CardIcon;
diff --git a/examples/demo/src/dashboard/MonthlyRevenue.js b/examples/demo/src/dashboard/MonthlyRevenue.js
index fea85177e5b..608e9bd9946 100644
--- a/examples/demo/src/dashboard/MonthlyRevenue.js
+++ b/examples/demo/src/dashboard/MonthlyRevenue.js
@@ -1,13 +1,13 @@
 import React from 'react';
 import Card from '@material-ui/core/Card';
 import DollarIcon from '@material-ui/icons/AttachMoney';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import { useTranslate } from 'react-admin';
 
 import CardIcon from './CardIcon';
 
-const styles = {
+const useStyles = makeStyles({
     main: {
         flex: '1',
         marginRight: '1em',
@@ -19,10 +19,11 @@ const styles = {
         padding: 16,
         minHeight: 52,
     },
-};
+});
 
-const MonthlyRevenue = ({ value, classes }) => {
+const MonthlyRevenue = ({ value }) => {
     const translate = useTranslate();
+    const classes = useStyles();
     return (
         <div className={classes.main}>
             <CardIcon Icon={DollarIcon} bgColor="#31708f" />
@@ -38,4 +39,4 @@ const MonthlyRevenue = ({ value, classes }) => {
     );
 };
 
-export default withStyles(styles)(MonthlyRevenue);
+export default MonthlyRevenue;
diff --git a/examples/demo/src/dashboard/NbNewOrders.js b/examples/demo/src/dashboard/NbNewOrders.js
index e0ac4a83187..dc454ba1f1d 100644
--- a/examples/demo/src/dashboard/NbNewOrders.js
+++ b/examples/demo/src/dashboard/NbNewOrders.js
@@ -1,13 +1,13 @@
 import React from 'react';
 import Card from '@material-ui/core/Card';
 import ShoppingCartIcon from '@material-ui/icons/ShoppingCart';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import { useTranslate } from 'react-admin';
 
 import CardIcon from './CardIcon';
 
-const styles = {
+const useStyles = makeStyles({
     main: {
         flex: '1',
         marginLeft: '1em',
@@ -19,10 +19,11 @@ const styles = {
         padding: 16,
         minHeight: 52,
     },
-};
+});
 
-const NbNewOrders = ({ value, classes }) => {
+const NbNewOrders = ({ value }) => {
     const translate = useTranslate();
+    const classes = useStyles();
     return (
         <div className={classes.main}>
             <CardIcon Icon={ShoppingCartIcon} bgColor="#ff9800" />
@@ -38,4 +39,4 @@ const NbNewOrders = ({ value, classes }) => {
     );
 };
 
-export default withStyles(styles)(NbNewOrders);
+export default NbNewOrders;
diff --git a/examples/demo/src/dashboard/Welcome.js b/examples/demo/src/dashboard/Welcome.js
index 549aa3547dc..4b44f623a8d 100644
--- a/examples/demo/src/dashboard/Welcome.js
+++ b/examples/demo/src/dashboard/Welcome.js
@@ -7,22 +7,23 @@ import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 import HomeIcon from '@material-ui/icons/Home';
 import CodeIcon from '@material-ui/icons/Code';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import { useTranslate } from 'react-admin';
 
-const styles = {
+const useStyles = makeStyles({
     media: {
         height: '18em',
     },
-};
+});
 
 const mediaUrl = `https://marmelab.com/posters/beard-${parseInt(
     Math.random() * 10,
     10
 ) + 1}.jpeg`;
 
-const Welcome = ({ classes }) => {
+const Welcome = () => {
     const translate = useTranslate();
+    const classes = useStyles();
     return (
         <Card>
             <CardMedia image={mediaUrl} className={classes.media} />
@@ -48,4 +49,4 @@ const Welcome = ({ classes }) => {
     );
 };
 
-export default withStyles(styles)(Welcome);
+export default Welcome;
diff --git a/examples/demo/src/layout/AppBar.js b/examples/demo/src/layout/AppBar.js
index 1d57528e76d..cd99f2dfc72 100644
--- a/examples/demo/src/layout/AppBar.js
+++ b/examples/demo/src/layout/AppBar.js
@@ -2,11 +2,11 @@ import React from 'react';
 import { AppBar, UserMenu, MenuItemLink, useTranslate } from 'react-admin';
 import Typography from '@material-ui/core/Typography';
 import SettingsIcon from '@material-ui/icons/Settings';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 import Logo from './Logo';
 
-const styles = {
+const useStyles = makeStyles({
     title: {
         flex: 1,
         textOverflow: 'ellipsis',
@@ -16,7 +16,7 @@ const styles = {
     spacer: {
         flex: 1,
     },
-};
+});
 
 const CustomUserMenu = props => {
     const translate = useTranslate();
@@ -31,17 +31,20 @@ const CustomUserMenu = props => {
     );
 };
 
-const CustomAppBar = ({ classes, ...props }) => (
-    <AppBar {...props} userMenu={<CustomUserMenu />}>
-        <Typography
-            variant="h6"
-            color="inherit"
-            className={classes.title}
-            id="react-admin-title"
-        />
-        <Logo />
-        <span className={classes.spacer} />
-    </AppBar>
-);
+const CustomAppBar = ({ props }) => {
+    const classes = useStyles();
+    return (
+        <AppBar {...props} userMenu={<CustomUserMenu />}>
+            <Typography
+                variant="h6"
+                color="inherit"
+                className={classes.title}
+                id="react-admin-title"
+            />
+            <Logo />
+            <span className={classes.spacer} />
+        </AppBar>
+    );
+};
 
-export default withStyles(styles)(CustomAppBar);
+export default CustomAppBar;
diff --git a/examples/demo/src/orders/MobileGrid.js b/examples/demo/src/orders/MobileGrid.js
index 45d42910b0a..5cadfd3f975 100644
--- a/examples/demo/src/orders/MobileGrid.js
+++ b/examples/demo/src/orders/MobileGrid.js
@@ -3,7 +3,7 @@ import React from 'react';
 import Card from '@material-ui/core/Card';
 import CardHeader from '@material-ui/core/CardHeader';
 import CardContent from '@material-ui/core/CardContent';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import {
     DateField,
     EditButton,
@@ -15,7 +15,7 @@ import {
 
 import CustomerReferenceField from '../visitors/CustomerReferenceField';
 
-const listStyles = theme => ({
+const useListStyles = makeStyles(theme => ({
     card: {
         height: '100%',
         display: 'flex',
@@ -35,10 +35,11 @@ const listStyles = theme => ({
         alignItems: 'center',
         margin: '0.5rem 0',
     },
-});
+}));
 
-const MobileGrid = ({ classes, ids, data, basePath }) => {
+const MobileGrid = ({ ids, data, basePath }) => {
     const translate = useTranslate();
+    const classes = useListStyles();
     return (
         <div style={{ margin: '1em' }}>
             {ids.map(id => (
@@ -112,4 +113,4 @@ MobileGrid.defaultProps = {
     ids: [],
 };
 
-export default withStyles(listStyles)(MobileGrid);
+export default MobileGrid;
diff --git a/examples/demo/src/orders/OrderEdit.js b/examples/demo/src/orders/OrderEdit.js
index 14ced2caf15..1c3ad566f6d 100644
--- a/examples/demo/src/orders/OrderEdit.js
+++ b/examples/demo/src/orders/OrderEdit.js
@@ -9,7 +9,7 @@ import {
     SimpleForm,
     useTranslate,
 } from 'react-admin';
-import withStyles from '@material-ui/core/styles/withStyles';
+import { makeStyles } from '@material-ui/core/styles';
 
 import Basket from './Basket';
 
@@ -24,37 +24,45 @@ const OrderTitle = ({ record }) => {
     );
 };
 
-const editStyles = {
+const useEditStyles = makeStyles({
     root: { alignItems: 'flex-start' },
-};
+});
 
-const OrderEdit = props => (
-    <Edit title={<OrderTitle />} aside={<Basket />} {...props}>
-        <SimpleForm>
-            <DateInput source="date" />
-            <ReferenceInput source="customer_id" reference="customers">
-                <AutocompleteInput
-                    optionText={choice =>
-                        `${choice.first_name} ${choice.last_name}`
-                    }
+const OrderEdit = props => {
+    const classes = useEditStyles();
+    return (
+        <Edit
+            title={<OrderTitle />}
+            aside={<Basket />}
+            classes={classes}
+            {...props}
+        >
+            <SimpleForm>
+                <DateInput source="date" />
+                <ReferenceInput source="customer_id" reference="customers">
+                    <AutocompleteInput
+                        optionText={choice =>
+                            `${choice.first_name} ${choice.last_name}`
+                        }
+                    />
+                </ReferenceInput>
+                <SelectInput
+                    source="status"
+                    choices={[
+                        { id: 'delivered', name: 'delivered' },
+                        { id: 'ordered', name: 'ordered' },
+                        { id: 'cancelled', name: 'cancelled' },
+                        {
+                            id: 'unknown',
+                            name: 'unknown',
+                            disabled: true,
+                        },
+                    ]}
                 />
-            </ReferenceInput>
-            <SelectInput
-                source="status"
-                choices={[
-                    { id: 'delivered', name: 'delivered' },
-                    { id: 'ordered', name: 'ordered' },
-                    { id: 'cancelled', name: 'cancelled' },
-                    {
-                        id: 'unknown',
-                        name: 'unknown',
-                        disabled: true,
-                    },
-                ]}
-            />
-            <BooleanInput source="returned" />
-        </SimpleForm>
-    </Edit>
-);
+                <BooleanInput source="returned" />
+            </SimpleForm>
+        </Edit>
+    );
+};
 
-export default withStyles(editStyles)(OrderEdit);
+export default OrderEdit;
diff --git a/examples/demo/src/orders/OrderList.js b/examples/demo/src/orders/OrderList.js
index a00c491206b..3cf1fd2039f 100644
--- a/examples/demo/src/orders/OrderList.js
+++ b/examples/demo/src/orders/OrderList.js
@@ -16,7 +16,7 @@ import {
     TextField,
     TextInput,
 } from 'react-admin';
-import withStyles from '@material-ui/core/styles/withStyles';
+import { makeStyles } from '@material-ui/core/styles';
 import Divider from '@material-ui/core/Divider';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
@@ -25,11 +25,7 @@ import NbItemsField from './NbItemsField';
 import CustomerReferenceField from '../visitors/CustomerReferenceField';
 import MobileGrid from './MobileGrid';
 
-const filterStyles = {
-    status: { width: 150 },
-};
-
-const OrderFilter = withStyles(filterStyles)(({ classes, ...props }) => (
+const OrderFilter = props => (
     <Filter {...props}>
         <SearchInput source="q" alwaysOn />
         <ReferenceInput source="customer_id" reference="customers">
@@ -44,11 +40,11 @@ const OrderFilter = withStyles(filterStyles)(({ classes, ...props }) => (
         <TextInput source="total_gte" />
         <NullableBooleanInput source="returned" />
     </Filter>
-));
+);
 
-const datagridStyles = {
+const useDatagridStyles = makeStyles({
     total: { fontWeight: 'bold' },
-};
+});
 
 class TabbedDatagrid extends React.Component {
     tabs = [
@@ -161,7 +157,10 @@ class TabbedDatagrid extends React.Component {
     }
 }
 
-const StyledTabbedDatagrid = withStyles(datagridStyles)(TabbedDatagrid);
+const StyledTabbedDatagrid = props => {
+    const classes = useDatagridStyles();
+    return <TabbedDatagrid classes={classes} {...props} />;
+};
 
 const OrderList = ({ classes, ...props }) => (
     <List
diff --git a/examples/demo/src/products/GridList.js b/examples/demo/src/products/GridList.js
index 3e22a82c57f..be99594821b 100644
--- a/examples/demo/src/products/GridList.js
+++ b/examples/demo/src/products/GridList.js
@@ -3,13 +3,13 @@ import compose from 'recompose/compose';
 import MuiGridList from '@material-ui/core/GridList';
 import GridListTile from '@material-ui/core/GridListTile';
 import GridListTileBar from '@material-ui/core/GridListTileBar';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import withWidth from '@material-ui/core/withWidth';
 import { Link } from 'react-router-dom';
 import { NumberField } from 'react-admin';
 import { linkToRecord } from 'ra-core';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
     root: {
         margin: '-2px',
     },
@@ -32,7 +32,7 @@ const styles = theme => ({
     link: {
         color: '#fff',
     },
-});
+}));
 
 const getColsForWidth = width => {
     if (width === 'xs') return 2;
@@ -45,68 +45,71 @@ const getColsForWidth = width => {
 const times = (nbChildren, fn) =>
     Array.from({ length: nbChildren }, (_, key) => fn(key));
 
-const LoadingGridList = ({ width, classes, nbItems = 10 }) => (
-    <div className={classes.root}>
-        <MuiGridList
-            cellHeight={180}
-            cols={getColsForWidth(width)}
-            className={classes.gridList}
-        >
-            {' '}
-            {times(nbItems, key => (
-                <GridListTile key={key}>
-                    <div className={classes.placeholder} />
-                </GridListTile>
-            ))}
-        </MuiGridList>
-    </div>
-);
+const LoadingGridList = ({ width, nbItems = 10 }) => {
+    const classes = useStyles();
+    return (
+        <div className={classes.root}>
+            <MuiGridList
+                cellHeight={180}
+                cols={getColsForWidth(width)}
+                className={classes.gridList}
+            >
+                {' '}
+                {times(nbItems, key => (
+                    <GridListTile key={key}>
+                        <div className={classes.placeholder} />
+                    </GridListTile>
+                ))}
+            </MuiGridList>
+        </div>
+    );
+};
 
-const LoadedGridList = ({ classes, ids, data, basePath, width }) => (
-    <div className={classes.root}>
-        <MuiGridList
-            cellHeight={180}
-            cols={getColsForWidth(width)}
-            className={classes.gridList}
-        >
-            {ids.map(id => (
-                <GridListTile
-                    component={Link}
-                    key={id}
-                    to={linkToRecord(basePath, data[id].id)}
-                >
-                    <img src={data[id].thumbnail} alt="" />
-                    <GridListTileBar
-                        className={classes.tileBar}
-                        title={data[id].reference}
-                        subtitle={
-                            <span>
-                                {data[id].width}x{data[id].height},{' '}
-                                <NumberField
-                                    className={classes.price}
-                                    source="price"
-                                    record={data[id]}
-                                    color="inherit"
-                                    options={{
-                                        style: 'currency',
-                                        currency: 'USD',
-                                    }}
-                                />
-                            </span>
-                        }
-                    />
-                </GridListTile>
-            ))}
-        </MuiGridList>
-    </div>
-);
+const LoadedGridList = ({ ids, data, basePath, width }) => {
+    const classes = useStyles();
+    return (
+        <div className={classes.root}>
+            <MuiGridList
+                cellHeight={180}
+                cols={getColsForWidth(width)}
+                className={classes.gridList}
+            >
+                {ids.map(id => (
+                    <GridListTile
+                        component={Link}
+                        key={id}
+                        to={linkToRecord(basePath, data[id].id)}
+                    >
+                        <img src={data[id].thumbnail} alt="" />
+                        <GridListTileBar
+                            className={classes.tileBar}
+                            title={data[id].reference}
+                            subtitle={
+                                <span>
+                                    {data[id].width}x{data[id].height},{' '}
+                                    <NumberField
+                                        className={classes.price}
+                                        source="price"
+                                        record={data[id]}
+                                        color="inherit"
+                                        options={{
+                                            style: 'currency',
+                                            currency: 'USD',
+                                        }}
+                                    />
+                                </span>
+                            }
+                        />
+                    </GridListTile>
+                ))}
+            </MuiGridList>
+        </div>
+    );
+};
 
 const GridList = ({ loadedOnce, ...props }) =>
     loadedOnce ? <LoadedGridList {...props} /> : <LoadingGridList {...props} />;
 
-const enhance = compose(
-    withWidth(),
-    withStyles(styles)
-);
+const enhance = compose(withWidth());
 
 export default enhance(GridList);
diff --git a/examples/demo/src/products/Poster.js b/examples/demo/src/products/Poster.js
index 8203514667f..74274585b79 100644
--- a/examples/demo/src/products/Poster.js
+++ b/examples/demo/src/products/Poster.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
-import withStyles from '@material-ui/core/styles/withStyles';
+import { makeStyles } from '@material-ui/core/styles';
 
-const styles = {
+const useStyles = makeStyles({
     root: { display: 'inline-block', marginTop: '1em', zIndex: 2 },
     content: { padding: 0, '&:last-child': { padding: 0 } },
     img: {
@@ -12,14 +12,17 @@ const styles = {
         maxWidth: '42em',
         maxHeight: '15em',
     },
-};
+});
 
-const Poster = withStyles(styles)(({ classes, record }) => (
-    <Card className={classes.root}>
-        <CardContent className={classes.content}>
-            <img src={record.image} alt="" className={classes.img} />
-        </CardContent>
-    </Card>
-));
+const Poster = ({ record }) => {
+    const classes = useStyles();
+    return (
+        <Card className={classes.root}>
+            <CardContent className={classes.content}>
+                <img src={record.image} alt="" className={classes.img} />
+            </CardContent>
+        </Card>
+    );
+};
 
 export default Poster;
diff --git a/examples/demo/src/products/ProductCreate.js b/examples/demo/src/products/ProductCreate.js
index b526a999a67..b1318d3f12b 100644
--- a/examples/demo/src/products/ProductCreate.js
+++ b/examples/demo/src/products/ProductCreate.js
@@ -9,7 +9,7 @@ import {
     TextInput,
     required,
 } from 'react-admin';
-import withStyles from '@material-ui/core/styles/withStyles';
+import { makeStyles } from '@material-ui/core/styles';
 import RichTextInput from 'ra-input-rich-text';
 
 export const styles = {
@@ -21,62 +21,67 @@ export const styles = {
     heightFormGroup: { display: 'inline-block', marginLeft: 32 },
 };
 
-const ProductCreate = ({ classes, ...props }) => (
-    <Create {...props}>
-        <TabbedForm>
-            <FormTab label="resources.products.tabs.image">
-                <TextInput
-                    autoFocus
-                    source="image"
-                    options={{ fullWidth: true }}
-                    validate={required()}
-                />
-                <TextInput
-                    source="thumbnail"
-                    options={{ fullWidth: true }}
-                    validate={required()}
-                />
-            </FormTab>
-            <FormTab label="resources.products.tabs.details" path="details">
-                <TextInput source="reference" validate={required()} />
-                <NumberInput
-                    source="price"
-                    validate={required()}
-                    className={classes.price}
-                />
-                <NumberInput
-                    source="width"
-                    validate={required()}
-                    className={classes.width}
-                    formClassName={classes.widthFormGroup}
-                />
-                <NumberInput
-                    source="height"
-                    validate={required()}
-                    className={classes.height}
-                    formClassName={classes.heightFormGroup}
-                />
-                <ReferenceInput
-                    source="category_id"
-                    reference="categories"
-                    allowEmpty
+const useStyles = makeStyles(styles);
+
+const ProductCreate = props => {
+    const classes = useStyles();
+    return (
+        <Create {...props}>
+            <TabbedForm>
+                <FormTab label="resources.products.tabs.image">
+                    <TextInput
+                        autoFocus
+                        source="image"
+                        options={{ fullWidth: true }}
+                        validate={required()}
+                    />
+                    <TextInput
+                        source="thumbnail"
+                        options={{ fullWidth: true }}
+                        validate={required()}
+                    />
+                </FormTab>
+                <FormTab label="resources.products.tabs.details" path="details">
+                    <TextInput source="reference" validate={required()} />
+                    <NumberInput
+                        source="price"
+                        validate={required()}
+                        className={classes.price}
+                    />
+                    <NumberInput
+                        source="width"
+                        validate={required()}
+                        className={classes.width}
+                        formClassName={classes.widthFormGroup}
+                    />
+                    <NumberInput
+                        source="height"
+                        validate={required()}
+                        className={classes.height}
+                        formClassName={classes.heightFormGroup}
+                    />
+                    <ReferenceInput
+                        source="category_id"
+                        reference="categories"
+                        allowEmpty
+                    >
+                        <SelectInput source="name" />
+                    </ReferenceInput>
+                    <NumberInput
+                        source="stock"
+                        validate={required()}
+                        className={classes.stock}
+                    />
+                </FormTab>
+                <FormTab
+                    label="resources.products.tabs.description"
+                    path="description"
                 >
-                    <SelectInput source="name" />
-                </ReferenceInput>
-                <NumberInput
-                    source="stock"
-                    validate={required()}
-                    className={classes.stock}
-                />
-            </FormTab>
-            <FormTab
-                label="resources.products.tabs.description"
-                path="description"
-            >
-                <RichTextInput source="description" addLabel={false} />
-            </FormTab>
-        </TabbedForm>
-    </Create>
-);
+                    <RichTextInput source="description" addLabel={false} />
+                </FormTab>
+            </TabbedForm>
+        </Create>
+    );
+};
 
-export default withStyles(styles)(ProductCreate);
+export default ProductCreate;
diff --git a/examples/demo/src/products/ProductEdit.js b/examples/demo/src/products/ProductEdit.js
index 3951dc263cd..adff0794395 100644
--- a/examples/demo/src/products/ProductEdit.js
+++ b/examples/demo/src/products/ProductEdit.js
@@ -14,7 +14,7 @@ import {
     TextField,
     TextInput,
 } from 'react-admin';
-import withStyles from '@material-ui/core/styles/withStyles';
+import { makeStyles } from '@material-ui/core/styles';
 import RichTextInput from 'ra-input-rich-text';
 
 import CustomerReferenceField from '../visitors/CustomerReferenceField';
@@ -34,60 +34,68 @@ const styles = {
     },
 };
 
-const ProductEdit = ({ classes, ...props }) => (
-    <Edit {...props} title={<ProductTitle />}>
-        <TabbedForm>
-            <FormTab label="resources.products.tabs.image">
-                <Poster />
-                <TextInput source="image" options={{ fullWidth: true }} />
-                <TextInput source="thumbnail" options={{ fullWidth: true }} />
-            </FormTab>
-            <FormTab label="resources.products.tabs.details" path="details">
-                <TextInput source="reference" />
-                <NumberInput source="price" className={classes.price} />
-                <NumberInput
-                    source="width"
-                    className={classes.width}
-                    formClassName={classes.widthFormGroup}
-                />
-                <NumberInput
-                    source="height"
-                    className={classes.height}
-                    formClassName={classes.heightFormGroup}
-                />
-                <ReferenceInput source="category_id" reference="categories">
-                    <SelectInput source="name" />
-                </ReferenceInput>
-                <NumberInput source="stock" className={classes.stock} />
-            </FormTab>
-            <FormTab
-                label="resources.products.tabs.description"
-                path="description"
-            >
-                <RichTextInput source="description" addLabel={false} />
-            </FormTab>
-            <FormTab label="resources.products.tabs.reviews" path="reviews">
-                <ReferenceManyField
-                    reference="reviews"
-                    target="product_id"
-                    addLabel={false}
-                    pagination={<Pagination />}
+const useStyles = makeStyles(styles);
+
+const ProductEdit = props => {
+    const classes = useStyles();
+    return (
+        <Edit {...props} title={<ProductTitle />}>
+            <TabbedForm>
+                <FormTab label="resources.products.tabs.image">
+                    <Poster />
+                    <TextInput source="image" options={{ fullWidth: true }} />
+                    <TextInput
+                        source="thumbnail"
+                        options={{ fullWidth: true }}
+                    />
+                </FormTab>
+                <FormTab label="resources.products.tabs.details" path="details">
+                    <TextInput source="reference" />
+                    <NumberInput source="price" className={classes.price} />
+                    <NumberInput
+                        source="width"
+                        className={classes.width}
+                        formClassName={classes.widthFormGroup}
+                    />
+                    <NumberInput
+                        source="height"
+                        className={classes.height}
+                        formClassName={classes.heightFormGroup}
+                    />
+                    <ReferenceInput source="category_id" reference="categories">
+                        <SelectInput source="name" />
+                    </ReferenceInput>
+                    <NumberInput source="stock" className={classes.stock} />
+                </FormTab>
+                <FormTab
+                    label="resources.products.tabs.description"
+                    path="description"
                 >
-                    <Datagrid>
-                        <DateField source="date" />
-                        <CustomerReferenceField />
-                        <StarRatingField />
-                        <TextField
-                            source="comment"
-                            cellClassName={classes.comment}
-                        />
-                        <TextField source="status" />
-                        <EditButton />
-                    </Datagrid>
-                </ReferenceManyField>
-            </FormTab>
-        </TabbedForm>
-    </Edit>
-);
+                    <RichTextInput source="description" addLabel={false} />
+                </FormTab>
+                <FormTab label="resources.products.tabs.reviews" path="reviews">
+                    <ReferenceManyField
+                        reference="reviews"
+                        target="product_id"
+                        addLabel={false}
+                        pagination={<Pagination />}
+                    >
+                        <Datagrid>
+                            <DateField source="date" />
+                            <CustomerReferenceField />
+                            <StarRatingField />
+                            <TextField
+                                source="comment"
+                                cellClassName={classes.comment}
+                            />
+                            <TextField source="status" />
+                            <EditButton />
+                        </Datagrid>
+                    </ReferenceManyField>
+                </FormTab>
+            </TabbedForm>
+        </Edit>
+    );
+};
 
-export default withStyles(styles)(ProductEdit);
+export default ProductEdit;
diff --git a/examples/demo/src/products/ProductList.js b/examples/demo/src/products/ProductList.js
index 27f9f243bfa..1001919a152 100644
--- a/examples/demo/src/products/ProductList.js
+++ b/examples/demo/src/products/ProductList.js
@@ -9,19 +9,20 @@ import {
     useTranslate,
 } from 'react-admin';
 import Chip from '@material-ui/core/Chip';
-import withStyles from '@material-ui/core/styles/withStyles';
+import { makeStyles } from '@material-ui/core/styles';
 import GridList from './GridList';
 
-const quickFilterStyles = {
+const useQuickFilterStyles = makeStyles({
     root: {
         marginBottom: '0.7em',
     },
-};
+});
 
-const QuickFilter = withStyles(quickFilterStyles)(({ classes, label }) => {
+const QuickFilter = ({ label }) => {
     const translate = useTranslate();
+    const classes = useQuickFilterStyles();
     return <Chip className={classes.root} label={translate(label)} />;
-});
+};
 
 export const ProductFilter = props => (
     <Filter {...props}>
diff --git a/examples/demo/src/products/ThumbnailField.js b/examples/demo/src/products/ThumbnailField.js
index 6c9ac1875ef..38dd3c422e2 100644
--- a/examples/demo/src/products/ThumbnailField.js
+++ b/examples/demo/src/products/ThumbnailField.js
@@ -1,12 +1,13 @@
 import React from 'react';
-import withStyles from '@material-ui/core/styles/withStyles';
+import { makeStyles } from '@material-ui/core/styles';
 
-const styles = {
+const useStyles = makeStyles({
     root: { width: 25, maxWidth: 25, maxHeight: 25 },
-};
+});
 
-const ThumbnailField = withStyles(styles)(({ classes, record }) => (
-    <img src={record.thumbnail} className={classes.root} alt="" />
-));
+const ThumbnailField = ({ record }) => {
+    const classes = useStyles();
+    return <img src={record.thumbnail} className={classes.root} alt="" />;
+};
 
 export default ThumbnailField;
diff --git a/examples/demo/src/reviews/ReviewEdit.js b/examples/demo/src/reviews/ReviewEdit.js
index 7d421a086d9..99da82934d1 100644
--- a/examples/demo/src/reviews/ReviewEdit.js
+++ b/examples/demo/src/reviews/ReviewEdit.js
@@ -7,7 +7,7 @@ import {
 } from 'react-admin';
 import IconButton from '@material-ui/core/IconButton';
 import Typography from '@material-ui/core/Typography';
-import withStyles from '@material-ui/core/styles/withStyles';
+import { makeStyles } from '@material-ui/core/styles';
 import CloseIcon from '@material-ui/icons/Close';
 
 import ProductReferenceField from '../products/ProductReferenceField';
@@ -15,7 +15,7 @@ import CustomerReferenceField from '../visitors/CustomerReferenceField';
 import StarRatingField from './StarRatingField';
 import ReviewEditToolbar from './ReviewEditToolbar';
 
-const editStyle = theme => ({
+const useEditStyle = makeStyles(theme => ({
     root: {
         paddingTop: 40,
     },
@@ -38,51 +38,56 @@ const editStyle = theme => ({
         display: 'inline-block',
         width: '50%',
     },
-});
+}));
 
-const ReviewEdit = ({ classes, onCancel, ...props }) => (
-    <EditController {...props}>
-        {controllerProps =>
-            controllerProps.record ? (
-                <div className={classes.root}>
-                    <div className={classes.title}>
-                        <Typography variant="h6">
-                            {controllerProps.translate(
-                                'resources.reviews.detail'
-                            )}
-                        </Typography>
-                        <IconButton onClick={onCancel}>
-                            <CloseIcon />
-                        </IconButton>
-                    </div>
-                    <SimpleForm
-                        className={classes.form}
-                        basePath={controllerProps.basePath}
-                        record={controllerProps.record}
-                        save={controllerProps.save}
-                        version={controllerProps.version}
-                        redirect="list"
-                        resource="reviews"
-                        toolbar={<ReviewEditToolbar />}
-                    >
-                        <CustomerReferenceField
-                            formClassName={classes.inlineField}
-                        />
+const ReviewEdit = ({ onCancel, ...props }) => {
+    const classes = useEditStyle();
+    return (
+        <EditController {...props}>
+            {controllerProps =>
+                controllerProps.record ? (
+                    <div className={classes.root}>
+                        <div className={classes.title}>
+                            <Typography variant="h6">
+                                {controllerProps.translate(
+                                    'resources.reviews.detail'
+                                )}
+                            </Typography>
+                            <IconButton onClick={onCancel}>
+                                <CloseIcon />
+                            </IconButton>
+                        </div>
+                        <SimpleForm
+                            className={classes.form}
+                            basePath={controllerProps.basePath}
+                            record={controllerProps.record}
+                            save={controllerProps.save}
+                            version={controllerProps.version}
+                            redirect="list"
+                            resource="reviews"
+                            toolbar={<ReviewEditToolbar />}
+                        >
+                            <CustomerReferenceField
+                                formClassName={classes.inlineField}
+                            />
 
-                        <ProductReferenceField
-                            formClassName={classes.inlineField}
-                        />
-                        <DateField
-                            source="date"
-                            formClassName={classes.inlineField}
-                        />
-                        <StarRatingField formClassName={classes.inlineField} />
-                        <LongTextInput source="comment" rowsMax={15} />
-                    </SimpleForm>
-                </div>
-            ) : null
-        }
-    </EditController>
-);
+                            <ProductReferenceField
+                                formClassName={classes.inlineField}
+                            />
+                            <DateField
+                                source="date"
+                                formClassName={classes.inlineField}
+                            />
+                            <StarRatingField
+                                formClassName={classes.inlineField}
+                            />
+                            <LongTextInput source="comment" rowsMax={15} />
+                        </SimpleForm>
+                    </div>
+                ) : null
+            }
+        </EditController>
+    );
+};
 
-export default withStyles(editStyle)(ReviewEdit);
+export default ReviewEdit;
diff --git a/examples/demo/src/reviews/ReviewEditToolbar.js b/examples/demo/src/reviews/ReviewEditToolbar.js
index da134663609..3632943e847 100644
--- a/examples/demo/src/reviews/ReviewEditToolbar.js
+++ b/examples/demo/src/reviews/ReviewEditToolbar.js
@@ -1,51 +1,53 @@
 import React, { Fragment } from 'react';
 import MuiToolbar from '@material-ui/core/Toolbar';
-import withStyles from '@material-ui/core/styles/withStyles';
+import { makeStyles } from '@material-ui/core/styles';
 
 import { SaveButton, DeleteButton } from 'react-admin';
 import AcceptButton from './AcceptButton';
 import RejectButton from './RejectButton';
 
-const styles = {
+const useStyles = makeStyles({
     root: {
         backgroundColor: 'white',
         display: 'flex',
         justifyContent: 'space-between',
     },
-};
+});
 
 const ReviewEditToolbar = ({
     basePath,
-    classes,
     handleSubmitWithRedirect,
     invalid,
     record,
     resource,
     saving,
-}) => (
-    <MuiToolbar className={classes.root}>
-        {record.status === 'pending' ? (
-            <Fragment>
-                <AcceptButton record={record} />
-                <RejectButton record={record} />
-            </Fragment>
-        ) : (
-            <Fragment>
-                <SaveButton
-                    handleSubmitWithRedirect={handleSubmitWithRedirect}
-                    invalid={invalid}
-                    saving={saving}
-                    redirect="list"
-                    submitOnEnter={true}
-                />
-                <DeleteButton
-                    basePath={basePath}
-                    record={record}
-                    resource={resource}
-                />
-            </Fragment>
-        )}
-    </MuiToolbar>
-);
+}) => {
+    const classes = useStyles();
+    return (
+        <MuiToolbar className={classes.root}>
+            {record.status === 'pending' ? (
+                <Fragment>
+                    <AcceptButton record={record} />
+                    <RejectButton record={record} />
+                </Fragment>
+            ) : (
+                <Fragment>
+                    <SaveButton
+                        handleSubmitWithRedirect={handleSubmitWithRedirect}
+                        invalid={invalid}
+                        saving={saving}
+                        redirect="list"
+                        submitOnEnter={true}
+                    />
+                    <DeleteButton
+                        basePath={basePath}
+                        record={record}
+                        resource={resource}
+                    />
+                </Fragment>
+            )}
+        </MuiToolbar>
+    );
+};
 
-export default withStyles(styles)(ReviewEditToolbar);
+export default ReviewEditToolbar;
diff --git a/examples/demo/src/reviews/ReviewFilter.js b/examples/demo/src/reviews/ReviewFilter.js
index 9f71345c28b..e56b3b77e7f 100644
--- a/examples/demo/src/reviews/ReviewFilter.js
+++ b/examples/demo/src/reviews/ReviewFilter.js
@@ -7,37 +7,40 @@ import {
     SearchInput,
     SelectInput,
 } from 'react-admin';
-import withStyles from '@material-ui/core/styles/withStyles';
+import { makeStyles } from '@material-ui/core/styles';
 
-const filterStyles = {
+const useFilterStyles = makeStyles({
     status: { width: 150 },
-};
+});
 
-const ReviewFilter = ({ classes, ...props }) => (
-    <Filter {...props}>
-        <SearchInput source="q" alwaysOn />
-        <SelectInput
-            source="status"
-            choices={[
-                { id: 'accepted', name: 'Accepted' },
-                { id: 'pending', name: 'Pending' },
-                { id: 'rejected', name: 'Rejected' },
-            ]}
-            className={classes.status}
-        />
-        <ReferenceInput source="customer_id" reference="customers">
-            <AutocompleteInput
-                optionText={choice =>
-                    `${choice.first_name} ${choice.last_name}`
-                }
+const ReviewFilter = props => {
+    const classes = useFilterStyles();
+    return (
+        <Filter {...props}>
+            <SearchInput source="q" alwaysOn />
+            <SelectInput
+                source="status"
+                choices={[
+                    { id: 'accepted', name: 'Accepted' },
+                    { id: 'pending', name: 'Pending' },
+                    { id: 'rejected', name: 'Rejected' },
+                ]}
+                className={classes.status}
             />
-        </ReferenceInput>
-        <ReferenceInput source="product_id" reference="products">
-            <AutocompleteInput optionText="reference" />
-        </ReferenceInput>
-        <DateInput source="date_gte" />
-        <DateInput source="date_lte" />
-    </Filter>
-);
+            <ReferenceInput source="customer_id" reference="customers">
+                <AutocompleteInput
+                    optionText={choice =>
+                        `${choice.first_name} ${choice.last_name}`
+                    }
+                />
+            </ReferenceInput>
+            <ReferenceInput source="product_id" reference="products">
+                <AutocompleteInput optionText="reference" />
+            </ReferenceInput>
+            <DateInput source="date_gte" />
+            <DateInput source="date_lte" />
+        </Filter>
+    );
+};
 
-export default withStyles(filterStyles)(ReviewFilter);
+export default ReviewFilter;
diff --git a/examples/demo/src/reviews/ReviewListDesktop.js b/examples/demo/src/reviews/ReviewListDesktop.js
index 56f6bf38eee..7ca6dae4284 100644
--- a/examples/demo/src/reviews/ReviewListDesktop.js
+++ b/examples/demo/src/reviews/ReviewListDesktop.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Datagrid, DateField, TextField } from 'react-admin';
-import withStyles from '@material-ui/core/styles/withStyles';
+import { makeStyles } from '@material-ui/core/styles';
 
 import ProductReferenceField from '../products/ProductReferenceField';
 import CustomerReferenceField from '../visitors/CustomerReferenceField';
@@ -8,7 +8,7 @@ import StarRatingField from './StarRatingField';
 
 import rowStyle from './rowStyle';
 
-const listStyles = {
+const useListStyles = makeStyles({
     headerRow: {
         borderLeftColor: 'white',
         borderLeftWidth: 5,
@@ -20,22 +20,25 @@ const listStyles = {
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap',
     },
-};
+});
 
-const ReviewListDesktop = ({ classes, ...props }) => (
-    <Datagrid
-        rowClick="edit"
-        rowStyle={rowStyle}
-        classes={{ headerRow: classes.headerRow }}
-        {...props}
-    >
-        <DateField source="date" />
-        <CustomerReferenceField linkType={false} />
-        <ProductReferenceField linkType={false} />
-        <StarRatingField />
-        <TextField source="comment" cellClassName={classes.comment} />
-        <TextField source="status" />
-    </Datagrid>
-);
+const ReviewListDesktop = props => {
+    const classes = useListStyles();
+    return (
+        <Datagrid
+            rowClick="edit"
+            rowStyle={rowStyle}
+            classes={{ headerRow: classes.headerRow }}
+            {...props}
+        >
+            <DateField source="date" />
+            <CustomerReferenceField linkType={false} />
+            <ProductReferenceField linkType={false} />
+            <StarRatingField />
+            <TextField source="comment" cellClassName={classes.comment} />
+            <TextField source="status" />
+        </Datagrid>
+    );
+};
 
-export default withStyles(listStyles)(ReviewListDesktop);
+export default ReviewListDesktop;
diff --git a/examples/demo/src/reviews/ReviewListMobile.js b/examples/demo/src/reviews/ReviewListMobile.js
index 4a0732e1983..b5aee0cbd40 100644
--- a/examples/demo/src/reviews/ReviewListMobile.js
+++ b/examples/demo/src/reviews/ReviewListMobile.js
@@ -4,7 +4,7 @@ import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemAvatar from '@material-ui/core/ListItemAvatar';
 import ListItemText from '@material-ui/core/ListItemText';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import { Link } from 'react-router-dom';
 import {
     linkToRecord,
@@ -15,7 +15,7 @@ import {
 
 import AvatarField from '../visitors/AvatarField';
 
-const styles = {
+const useStyles = makeStyles({
     root: {
         width: '100vw',
     },
@@ -26,86 +26,80 @@ const styles = {
     inline: {
         display: 'inline',
     },
-};
+});
 
-const ReviewMobileList = ({
-    basePath,
-    classes = {},
-    className,
-    data,
-    ids,
-    isLoading,
-    total,
-}) =>
-    (isLoading || total > 0) && (
-        <List className={classes.root}>
-            {ids.map(id => (
-                <Link
-                    to={linkToRecord(basePath, id)}
-                    className={classes.link}
-                    key={id}
-                >
-                    <ListItem button>
-                        <ListItemAvatar>
-                            <ReferenceField
-                                record={data[id]}
-                                source="customer_id"
-                                reference="customers"
-                                basePath={basePath}
-                                linkType={false}
-                            >
-                                <AvatarField size={40} />
-                            </ReferenceField>
-                        </ListItemAvatar>
-                        <ListItemText
-                            primary={
-                                <Fragment>
-                                    <ReferenceField
-                                        record={data[id]}
-                                        source="customer_id"
-                                        reference="customers"
-                                        basePath={basePath}
-                                        linkType={false}
-                                    >
-                                        <FunctionField
-                                            render={record =>
-                                                `${record.first_name} ${
-                                                    record.last_name
-                                                }`
-                                            }
-                                            variant="subtitle1"
-                                            className={classes.inline}
-                                        />
-                                    </ReferenceField>{' '}
-                                    on{' '}
-                                    <ReferenceField
-                                        record={data[id]}
-                                        source="product_id"
-                                        reference="products"
-                                        basePath={basePath}
-                                        linkType={false}
-                                    >
-                                        <TextField
-                                            source="reference"
-                                            variant="subtitle1"
-                                            className={classes.inline}
-                                        />
-                                    </ReferenceField>
-                                </Fragment>
-                            }
-                            secondary={data[id].comment}
-                            secondaryTypographyProps={{ noWrap: true }}
-                        />
-                    </ListItem>
-                </Link>
-            ))}
-        </List>
+const ReviewMobileList = ({ basePath, data, ids, isLoading, total }) => {
+    const classes = useStyles();
+    return (
+        (isLoading || total > 0) && (
+            <List className={classes.root}>
+                {ids.map(id => (
+                    <Link
+                        to={linkToRecord(basePath, id)}
+                        className={classes.link}
+                        key={id}
+                    >
+                        <ListItem button>
+                            <ListItemAvatar>
+                                <ReferenceField
+                                    record={data[id]}
+                                    source="customer_id"
+                                    reference="customers"
+                                    basePath={basePath}
+                                    linkType={false}
+                                >
+                                    <AvatarField size={40} />
+                                </ReferenceField>
+                            </ListItemAvatar>
+                            <ListItemText
+                                primary={
+                                    <Fragment>
+                                        <ReferenceField
+                                            record={data[id]}
+                                            source="customer_id"
+                                            reference="customers"
+                                            basePath={basePath}
+                                            linkType={false}
+                                        >
+                                            <FunctionField
+                                                render={record =>
+                                                    `${record.first_name} ${
+                                                        record.last_name
+                                                    }`
+                                                }
+                                                variant="subtitle1"
+                                                className={classes.inline}
+                                            />
+                                        </ReferenceField>{' '}
+                                        on{' '}
+                                        <ReferenceField
+                                            record={data[id]}
+                                            source="product_id"
+                                            reference="products"
+                                            basePath={basePath}
+                                            linkType={false}
+                                        >
+                                            <TextField
+                                                source="reference"
+                                                variant="subtitle1"
+                                                className={classes.inline}
+                                            />
+                                        </ReferenceField>
+                                    </Fragment>
+                                }
+                                secondary={data[id].comment}
+                                secondaryTypographyProps={{ noWrap: true }}
+                            />
+                        </ListItem>
+                    </Link>
+                ))}
+            </List>
+        )
     );
+};
 
 ReviewMobileList.propTypes = {
     basePath: PropTypes.string,
-    classes: PropTypes.object,
-    className: PropTypes.string,
     data: PropTypes.object,
     hasBulkActions: PropTypes.bool.isRequired,
     ids: PropTypes.array,
@@ -128,4 +122,4 @@ ReviewMobileList.defaultProps = {
     selectedIds: [],
 };
 
-export default withStyles(styles)(ReviewMobileList);
+export default ReviewMobileList;
diff --git a/examples/demo/src/segments/LinkToRelatedCustomers.js b/examples/demo/src/segments/LinkToRelatedCustomers.js
index b026e00ada4..b2ae2a4d28c 100644
--- a/examples/demo/src/segments/LinkToRelatedCustomers.js
+++ b/examples/demo/src/segments/LinkToRelatedCustomers.js
@@ -1,22 +1,23 @@
 import React from 'react';
 import Button from '@material-ui/core/Button';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import { Link } from 'react-router-dom';
 import { useTranslate } from 'react-admin';
 import { stringify } from 'query-string';
 
 import visitors from '../visitors';
 
-const styles = {
+const useStyles = makeStyles({
     icon: { paddingRight: '0.5em' },
     link: {
         display: 'inline-flex',
         alignItems: 'center',
     },
-};
+});
 
-const LinkToRelatedCustomers = ({ classes, segment }) => {
+const LinkToRelatedCustomers = ({ segment }) => {
     const translate = useTranslate();
+    const classes = useStyles();
     return (
         <Button
             size="small"
@@ -38,4 +39,4 @@ const LinkToRelatedCustomers = ({ classes, segment }) => {
     );
 };
 
-export default withStyles(styles)(LinkToRelatedCustomers);
+export default LinkToRelatedCustomers;
diff --git a/examples/demo/src/visitors/MobileGrid.js b/examples/demo/src/visitors/MobileGrid.js
index 6b17ce2768f..5fba84782aa 100644
--- a/examples/demo/src/visitors/MobileGrid.js
+++ b/examples/demo/src/visitors/MobileGrid.js
@@ -3,14 +3,15 @@ import React from 'react';
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
 import CardHeader from '@material-ui/core/CardHeader';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
+
 import { DateField, EditButton, useTranslate, NumberField } from 'react-admin';
 
 import AvatarField from './AvatarField';
 import ColoredNumberField from './ColoredNumberField';
 import SegmentsField from './SegmentsField';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
     card: {
         height: '100%',
         display: 'flex',
@@ -28,10 +29,11 @@ const styles = theme => ({
         display: 'flex',
         flexDirection: 'column',
     },
-});
+}));
 
-const MobileGrid = ({ classes, ids, data, basePath }) => {
+const MobileGrid = ({ ids, data, basePath }) => {
     const translate = useTranslate();
+    const classes = useStyles();
     return (
         <div style={{ margin: '1em' }}>
             {ids.map(id => (
@@ -104,4 +106,4 @@ MobileGrid.defaultProps = {
     ids: [],
 };
 
-export default withStyles(styles)(MobileGrid);
+export default MobileGrid;
diff --git a/examples/demo/src/visitors/SegmentInput.js b/examples/demo/src/visitors/SegmentInput.js
index 736096bde4d..5d50b0652a8 100644
--- a/examples/demo/src/visitors/SegmentInput.js
+++ b/examples/demo/src/visitors/SegmentInput.js
@@ -1,18 +1,19 @@
 import React from 'react';
 import { useTranslate, SelectInput } from 'react-admin';
-import withStyles from '@material-ui/core/styles/withStyles';
+import { makeStyles } from '@material-ui/core/styles';
 
 import segments from '../segments/data';
 
-const styles = {
+const useStyles = makeStyles({
     input: { width: 150 },
-};
+});
 
-const SegmentInput = ({ classes, ...rest }) => {
+const SegmentInput = props => {
     const translate = useTranslate();
+    const classes = useStyles();
     return (
         <SelectInput
-            {...rest}
+            {...props}
             choices={segments.map(segment => ({
                 id: segment.id,
                 name: translate(segment.name),
@@ -22,10 +23,8 @@ const SegmentInput = ({ classes, ...rest }) => {
     );
 };
 
-const TranslatedSegmentInput = withStyles(styles)(SegmentInput);
-
-TranslatedSegmentInput.defaultProps = {
+SegmentInput.defaultProps = {
     source: 'groups',
 };
 
-export default TranslatedSegmentInput;
+export default SegmentInput;
diff --git a/examples/demo/src/visitors/VisitorCreate.js b/examples/demo/src/visitors/VisitorCreate.js
index 54ee2caf04d..ed6b0eeae67 100644
--- a/examples/demo/src/visitors/VisitorCreate.js
+++ b/examples/demo/src/visitors/VisitorCreate.js
@@ -7,7 +7,7 @@ import {
     TabbedForm,
     TextInput,
 } from 'react-admin';
-import withStyles from '@material-ui/core/styles/withStyles';
+import { makeStyles } from '@material-ui/core/styles';
 
 export const styles = {
     first_name: { display: 'inline-block' },
@@ -24,38 +24,49 @@ export const styles = {
     },
 };
 
-const VisitorCreate = ({ classes, ...props }) => (
-    <Create {...props}>
-        <TabbedForm>
-            <FormTab label="resources.customers.tabs.identity">
-                <TextInput
-                    autoFocus
-                    source="first_name"
-                    formClassName={classes.first_name}
-                />
-                <TextInput
-                    source="last_name"
-                    formClassName={classes.last_name}
-                />
-                <TextInput
-                    type="email"
-                    source="email"
-                    validation={{ email: true }}
-                    fullWidth={true}
-                    formClassName={classes.email}
-                />
-                <DateInput source="birthday" />
-            </FormTab>
-            <FormTab label="resources.customers.tabs.address" path="address">
-                <LongTextInput
-                    source="address"
-                    formClassName={classes.address}
-                />
-                <TextInput source="zipcode" formClassName={classes.zipcode} />
-                <TextInput source="city" formClassName={classes.city} />
-            </FormTab>
-        </TabbedForm>
-    </Create>
-);
+const useStyles = makeStyles(styles);
 
-export default withStyles(styles)(VisitorCreate);
+const VisitorCreate = props => {
+    const classes = useStyles();
+    return (
+        <Create {...props}>
+            <TabbedForm>
+                <FormTab label="resources.customers.tabs.identity">
+                    <TextInput
+                        autoFocus
+                        source="first_name"
+                        formClassName={classes.first_name}
+                    />
+                    <TextInput
+                        source="last_name"
+                        formClassName={classes.last_name}
+                    />
+                    <TextInput
+                        type="email"
+                        source="email"
+                        validation={{ email: true }}
+                        fullWidth={true}
+                        formClassName={classes.email}
+                    />
+                    <DateInput source="birthday" />
+                </FormTab>
+                <FormTab
+                    label="resources.customers.tabs.address"
+                    path="address"
+                >
+                    <LongTextInput
+                        source="address"
+                        formClassName={classes.address}
+                    />
+                    <TextInput
+                        source="zipcode"
+                        formClassName={classes.zipcode}
+                    />
+                    <TextInput source="city" formClassName={classes.city} />
+                </FormTab>
+            </TabbedForm>
+        </Create>
+    );
+};
+
+export default VisitorCreate;
diff --git a/examples/demo/src/visitors/VisitorEdit.js b/examples/demo/src/visitors/VisitorEdit.js
index ba7c4443bb4..1a2f26a9c69 100644
--- a/examples/demo/src/visitors/VisitorEdit.js
+++ b/examples/demo/src/visitors/VisitorEdit.js
@@ -14,7 +14,7 @@ import {
     TextField,
     TextInput,
 } from 'react-admin';
-import withStyles from '@material-ui/core/styles/withStyles';
+import { makeStyles } from '@material-ui/core/styles';
 
 import NbItemsField from '../orders/NbItemsField';
 import ProductReferenceField from '../products/ProductReferenceField';
@@ -23,95 +23,109 @@ import FullNameField from './FullNameField';
 import SegmentsInput from './SegmentsInput';
 import { styles } from './VisitorCreate';
 
+const useStyles = makeStyles(styles);
+
 const VisitorTitle = ({ record }) =>
     record ? <FullNameField record={record} size={32} /> : null;
 
-const VisitorEdit = ({ classes, ...props }) => (
-    <Edit title={<VisitorTitle />} {...props}>
-        <TabbedForm>
-            <FormTab label="resources.customers.tabs.identity">
-                <TextInput
-                    source="first_name"
-                    formClassName={classes.first_name}
-                />
-                <TextInput
-                    source="last_name"
-                    formClassName={classes.last_name}
-                />
-                <TextInput
-                    type="email"
-                    source="email"
-                    validation={{ email: true }}
-                    fullWidth={true}
-                    formClassName={classes.email}
-                />
-                <DateInput source="birthday" />
-            </FormTab>
-            <FormTab label="resources.customers.tabs.address" path="address">
-                <LongTextInput
-                    source="address"
-                    formClassName={classes.address}
-                />
-                <TextInput source="zipcode" formClassName={classes.zipcode} />
-                <TextInput source="city" formClassName={classes.city} />
-            </FormTab>
-            <FormTab label="resources.customers.tabs.orders" path="orders">
-                <ReferenceManyField
-                    addLabel={false}
-                    sort={{ field: 'date', order: 'DESC' }}
-                    reference="commands"
-                    target="customer_id"
+const VisitorEdit = props => {
+    const classes = useStyles();
+    return (
+        <Edit title={<VisitorTitle />} {...props}>
+            <TabbedForm>
+                <FormTab label="resources.customers.tabs.identity">
+                    <TextInput
+                        source="first_name"
+                        formClassName={classes.first_name}
+                    />
+                    <TextInput
+                        source="last_name"
+                        formClassName={classes.last_name}
+                    />
+                    <TextInput
+                        type="email"
+                        source="email"
+                        validation={{ email: true }}
+                        fullWidth={true}
+                        formClassName={classes.email}
+                    />
+                    <DateInput source="birthday" />
+                </FormTab>
+                <FormTab
+                    label="resources.customers.tabs.address"
+                    path="address"
                 >
-                    <Datagrid>
-                        <DateField source="date" />
-                        <TextField source="reference" />
-                        <NbItemsField />
-                        <NumberField
-                            source="total"
-                            options={{ style: 'currency', currency: 'USD' }}
-                        />
-                        <TextField source="status" />
-                        <EditButton />
-                    </Datagrid>
-                </ReferenceManyField>
-            </FormTab>
-            <FormTab label="resources.customers.tabs.reviews" path="reviews">
-                <ReferenceManyField
-                    addLabel={false}
-                    sort={{ field: 'date', order: 'DESC' }}
-                    reference="reviews"
-                    target="customer_id"
+                    <LongTextInput
+                        source="address"
+                        formClassName={classes.address}
+                    />
+                    <TextInput
+                        source="zipcode"
+                        formClassName={classes.zipcode}
+                    />
+                    <TextInput source="city" formClassName={classes.city} />
+                </FormTab>
+                <FormTab label="resources.customers.tabs.orders" path="orders">
+                    <ReferenceManyField
+                        addLabel={false}
+                        sort={{ field: 'date', order: 'DESC' }}
+                        reference="commands"
+                        target="customer_id"
+                    >
+                        <Datagrid>
+                            <DateField source="date" />
+                            <TextField source="reference" />
+                            <NbItemsField />
+                            <NumberField
+                                source="total"
+                                options={{ style: 'currency', currency: 'USD' }}
+                            />
+                            <TextField source="status" />
+                            <EditButton />
+                        </Datagrid>
+                    </ReferenceManyField>
+                </FormTab>
+                <FormTab
+                    label="resources.customers.tabs.reviews"
+                    path="reviews"
                 >
-                    <Datagrid filter={{ status: 'approved' }}>
-                        <DateField source="date" />
-                        <ProductReferenceField />
-                        <StarRatingField />
-                        <TextField
-                            source="comment"
-                            cellClassName={classes.comment}
-                        />
-                        <EditButton style={{ padding: 0 }} />
-                    </Datagrid>
-                </ReferenceManyField>
-            </FormTab>
-            <FormTab label="resources.customers.tabs.stats" path="stats">
-                <SegmentsInput />
-                <NullableBooleanInput source="has_newsletter" />
-                <DateField
-                    source="first_seen"
-                    style={{ width: 128, display: 'inline-block' }}
-                />
-                <DateField
-                    source="latest_purchase"
-                    style={{ width: 128, display: 'inline-block' }}
-                />
-                <DateField
-                    source="last_seen"
-                    style={{ width: 128, display: 'inline-block' }}
-                />
-            </FormTab>
-        </TabbedForm>
-    </Edit>
-);
+                    <ReferenceManyField
+                        addLabel={false}
+                        sort={{ field: 'date', order: 'DESC' }}
+                        reference="reviews"
+                        target="customer_id"
+                    >
+                        <Datagrid filter={{ status: 'approved' }}>
+                            <DateField source="date" />
+                            <ProductReferenceField />
+                            <StarRatingField />
+                            <TextField
+                                source="comment"
+                                cellClassName={classes.comment}
+                            />
+                            <EditButton style={{ padding: 0 }} />
+                        </Datagrid>
+                    </ReferenceManyField>
+                </FormTab>
+                <FormTab label="resources.customers.tabs.stats" path="stats">
+                    <SegmentsInput />
+                    <NullableBooleanInput source="has_newsletter" />
+                    <DateField
+                        source="first_seen"
+                        style={{ width: 128, display: 'inline-block' }}
+                    />
+                    <DateField
+                        source="latest_purchase"
+                        style={{ width: 128, display: 'inline-block' }}
+                    />
+                    <DateField
+                        source="last_seen"
+                        style={{ width: 128, display: 'inline-block' }}
+                    />
+                </FormTab>
+            </TabbedForm>
+        </Edit>
+    );
+};
 
-export default withStyles(styles)(VisitorEdit);
+export default VisitorEdit;
diff --git a/examples/demo/src/visitors/VisitorList.js b/examples/demo/src/visitors/VisitorList.js
index ef819b38a41..e93dd11b51d 100644
--- a/examples/demo/src/visitors/VisitorList.js
+++ b/examples/demo/src/visitors/VisitorList.js
@@ -12,7 +12,7 @@ import {
     Responsive,
     SearchInput,
 } from 'react-admin';
-import withStyles from '@material-ui/core/styles/withStyles';
+import { makeStyles } from '@material-ui/core/styles';
 
 import SegmentsField from './SegmentsField';
 import SegmentInput from './SegmentInput';
@@ -30,40 +30,43 @@ const VisitorFilter = props => (
     </Filter>
 );
 
-const styles = {
+const useStyles = makeStyles({
     nb_commands: { color: 'purple' },
-};
+});
 
-const VisitorList = ({ classes, ...props }) => (
-    <List
-        {...props}
-        filters={<VisitorFilter />}
-        sort={{ field: 'last_seen', order: 'DESC' }}
-        perPage={25}
-    >
-        <Responsive
-            xsmall={<MobileGrid />}
-            medium={
-                <Datagrid>
-                    <CustomerLinkField />
-                    <DateField source="last_seen" type="date" />
-                    <NumberField
-                        source="nb_commands"
-                        label="resources.customers.fields.commands"
-                        className={classes.nb_commands}
-                    />
-                    <ColoredNumberField
-                        source="total_spent"
-                        options={{ style: 'currency', currency: 'USD' }}
-                    />
-                    <DateField source="latest_purchase" showTime />
-                    <BooleanField source="has_newsletter" label="News." />
-                    <SegmentsField />
-                    <EditButton />
-                </Datagrid>
-            }
-        />
-    </List>
-);
+const VisitorList = props => {
+    const classes = useStyles();
+    return (
+        <List
+            {...props}
+            filters={<VisitorFilter />}
+            sort={{ field: 'last_seen', order: 'DESC' }}
+            perPage={25}
+        >
+            <Responsive
+                xsmall={<MobileGrid />}
+                medium={
+                    <Datagrid>
+                        <CustomerLinkField />
+                        <DateField source="last_seen" type="date" />
+                        <NumberField
+                            source="nb_commands"
+                            label="resources.customers.fields.commands"
+                            className={classes.nb_commands}
+                        />
+                        <ColoredNumberField
+                            source="total_spent"
+                            options={{ style: 'currency', currency: 'USD' }}
+                        />
+                        <DateField source="latest_purchase" showTime />
+                        <BooleanField source="has_newsletter" label="News." />
+                        <SegmentsField />
+                        <EditButton />
+                    </Datagrid>
+                }
+            />
+        </List>
+    );
+};
 
-export default withStyles(styles)(VisitorList);
+export default VisitorList;

From 35d6212efabcc0660d53d32b4f710e1e998623ba Mon Sep 17 00:00:00 2001
From: zyhou <richard.maxime9@gmail.com>
Date: Thu, 13 Jun 2019 13:31:09 +0200
Subject: [PATCH 2/2] remove useless compose on gridlist

---
 examples/demo/src/products/GridList.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/examples/demo/src/products/GridList.js b/examples/demo/src/products/GridList.js
index be99594821b..1a8642ced48 100644
--- a/examples/demo/src/products/GridList.js
+++ b/examples/demo/src/products/GridList.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import compose from 'recompose/compose';
 import MuiGridList from '@material-ui/core/GridList';
 import GridListTile from '@material-ui/core/GridListTile';
 import GridListTileBar from '@material-ui/core/GridListTileBar';
@@ -110,6 +109,4 @@ const LoadedGridList = ({ ids, data, basePath, width }) => {
 const GridList = ({ loadedOnce, ...props }) =>
     loadedOnce ? <LoadedGridList {...props} /> : <LoadingGridList {...props} />;
 
-const enhance = compose(withWidth());
-
-export default enhance(GridList);
+export default withWidth()(GridList);