Merge pull request #3986 from marmelab/custom-classes-login-component

[RFR] Fix Login component does not accept style override
marmelab · Nov 14, 2019 · 4112dcd · 4112dcd
2 parents c7779bb + e72a27b
commit 4112dcd
Showing 1 changed file with 10 additions and 5 deletions.
diff --git a/packages/ra-ui-materialui/src/auth/Login.tsx b/packages/ra-ui-materialui/src/auth/Login.tsx
@@ -27,6 +27,8 @@ import DefaultLoginForm from './LoginForm';
 interface Props {
     backgroundImage?: string;
     children: ReactNode;
+    classes?: object;
+    className?: string;
     staticContext?: StaticContext;
     theme: object;
 }
@@ -78,14 +80,15 @@ const Login: React.FunctionComponent<
     Props & HtmlHTMLAttributes<HTMLDivElement>
 > = ({
     theme,
+    classes: classesOverride,
     className,
     children,
     staticContext,
     backgroundImage,
     ...rest
 }) => {
     const containerRef = useRef<HTMLDivElement>();
-    const styles = useStyles({});
+    const classes = useStyles({ classes: classesOverride });
     const muiTheme = useMemo(() => createMuiTheme(theme), [theme]);
     let backgroundImageLoaded = false;
     const checkAuth = useCheckAuth();
@@ -126,13 +129,13 @@ const Login: React.FunctionComponent<
     return (
         <ThemeProvider theme={muiTheme}>
             <div
-                className={classnames(styles.main, className)}
+                className={classnames(classes.main, className)}
                 {...rest}
                 ref={containerRef}
             >
-                <Card className={styles.card}>
-                    <div className={styles.avatar}>
-                        <Avatar className={styles.icon}>
+                <Card className={classes.card}>
+                    <div className={classes.avatar}>
+                        <Avatar className={classes.icon}>
                             <LockIcon />
                         </Avatar>
                     </div>
@@ -147,6 +150,8 @@ const Login: React.FunctionComponent<
 Login.propTypes = {
     backgroundImage: PropTypes.string,
     children: PropTypes.node,
+    classes: PropTypes.object,
+    className: PropTypes.string,
     theme: PropTypes.object,
     staticContext: PropTypes.object,
 };