Merge pull request #3558 from jaytula/usestyles-error-component

[RFR] Change to useStyles for Error component
marmelab · Aug 21, 2019 · 648655b · 648655b
2 parents 8d0594a + cae91b5
commit 648655b
Showing 1 changed file with 41 additions and 34 deletions.
diff --git a/packages/ra-ui-materialui/src/layout/Error.js b/packages/ra-ui-materialui/src/layout/Error.js
@@ -5,52 +5,59 @@ import Button from '@material-ui/core/Button';
 import ExpansionPanel from '@material-ui/core/ExpansionPanel';
 import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
 import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
-import { withStyles, createStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import ErrorIcon from '@material-ui/icons/Report';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import History from '@material-ui/icons/History';
 
 import Title, { TitlePropType } from './Title';
 import { useTranslate } from 'ra-core';
 
-const styles = theme =>
-    createStyles({
-        container: {
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-            [theme.breakpoints.down('sm')]: {
-                padding: '1em',
-            },
-            fontFamily: 'Roboto, sans-serif',
-            opacity: 0.5,
+const useStyles = makeStyles(theme => ({
+    container: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        [theme.breakpoints.down('sm')]: {
+            padding: '1em',
         },
-        title: {
-            display: 'flex',
-            alignItems: 'center',
-        },
-        icon: {
-            width: '2em',
-            height: '2em',
-            marginRight: '0.5em',
-        },
-        panel: {
-            marginTop: '1em',
-        },
-        panelDetails: {
-            whiteSpace: 'pre-wrap',
-        },
-        toolbar: {
-            marginTop: '2em',
-        },
-    });
+        fontFamily: 'Roboto, sans-serif',
+        opacity: 0.5,
+    },
+    title: {
+        display: 'flex',
+        alignItems: 'center',
+    },
+    icon: {
+        width: '2em',
+        height: '2em',
+        marginRight: '0.5em',
+    },
+    panel: {
+        marginTop: '1em',
+    },
+    panelDetails: {
+        whiteSpace: 'pre-wrap',
+    },
+    toolbar: {
+        marginTop: '2em',
+    },
+}));
 
 function goBack() {
     window.history.go(-1);
 }
 
-const Error = ({ error, errorInfo, classes, className, title, ...rest }) => {
+const Error = ({
+    error,
+    errorInfo,
+    classes: classesOverride,
+    className,
+    title,
+    ...rest
+}) => {
+    const classes = useStyles({ classes: classesOverride });
     const translate = useTranslate();
     return (
         <Fragment>
@@ -96,4 +103,4 @@ Error.propTypes = {
     title: TitlePropType,
 };
 
-export default withStyles(styles)(Error);
+export default Error;