Change to useStyles for CardContentInner comopnent

marmelab · Aug 21, 2019 · a020856 · a020856
1 parent 875d719
commit a020856
Showing 1 changed file with 27 additions and 21 deletions.
diff --git a/packages/ra-ui-materialui/src/layout/CardContentInner.js b/packages/ra-ui-materialui/src/layout/CardContentInner.js
@@ -2,24 +2,23 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import CardContent from '@material-ui/core/CardContent';
-import { withStyles, createStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
-var styles = theme =>
-    createStyles({
-        root: {
-            paddingTop: 0,
-            paddingBottom: 0,
-            '&:first-child': {
-                paddingTop: 16,
-            },
-            '&:last-child': {
-                paddingBottom: 16,
-                [theme.breakpoints.only('xs')]: {
-                    paddingBottom: 70,
-                },
+var useStyles = makeStyles(theme => ({
+    root: {
+        paddingTop: 0,
+        paddingBottom: 0,
+        '&:first-child': {
+            paddingTop: 16,
+        },
+        '&:last-child': {
+            paddingBottom: 16,
+            [theme.breakpoints.only('xs')]: {
+                paddingBottom: 70,
             },
         },
-    });
+    },
+}));
 
 /**
  * Overrides material-ui CardContent to allow inner content
@@ -28,16 +27,23 @@ var styles = theme =>
  * padding double the spacing between each CardContent, leading to too much
  * wasted space. Use this component as a CardContent alternative.
  */
-const CardContentInner = ({ classes, className, children }) => (
-    <CardContent className={classnames(classes.root, className)}>
-        {children}
-    </CardContent>
-);
+const CardContentInner = ({
+    classes: classesOverride,
+    className,
+    children,
+}) => {
+    const classes = useStyles({ classes: classesOverride });
+    return (
+        <CardContent className={classnames(classes.root, className)}>
+            {children}
+        </CardContent>
+    );
+};
 
 CardContentInner.propTypes = {
     className: PropTypes.string,
     classes: PropTypes.object.isRequired,
     children: PropTypes.node,
 };
 
-export default withStyles(styles)(CardContentInner);
+export default CardContentInner;