Fix rerender caused by style override

packages/ra-ui-materialui/src/Link.tsx

@@ -22,14 +22,15 @@ export interface LinkProps extends RRLinkProps {
     className?: string;
 }
 
-const Link: FC<LinkProps> = ({
-    to,
-    children,
-    classes: classesOverride,
-    className,
-    ...rest
-}) => {
-    const classes = useStyles({ classes: classesOverride });
+const Link: FC<LinkProps> = props => {
+    const {
+        to,
+        children,
+        classes: classesOverride,
+        className,
+        ...rest
+    } = props;
+    const classes = useStyles(props);
     return (
         <RRLink
             to={to}

packages/ra-ui-materialui/src/auth/Login.tsx

@@ -83,17 +83,18 @@ const useStyles = makeStyles(
  */
 const Login: React.FunctionComponent<
     Props & HtmlHTMLAttributes<HTMLDivElement>
-> = ({
-    theme,
-    classes: classesOverride,
-    className,
-    children,
-    staticContext,
-    backgroundImage,
-    ...rest
-}) => {
+> = props => {
+    const {
+        theme,
+        classes: classesOverride,
+        className,
+        children,
+        staticContext,
+        backgroundImage,
+        ...rest
+    } = props;
     const containerRef = useRef<HTMLDivElement>();
-    const classes = useStyles({ classes: classesOverride });
+    const classes = useStyles(props);
     const muiTheme = useMemo(() => createMuiTheme(theme), [theme]);
     let backgroundImageLoaded = false;
     const checkAuth = useCheckAuth();

packages/ra-ui-materialui/src/auth/LoginForm.tsx

@@ -49,12 +49,13 @@ const Input = ({
     />
 );
 
-const LoginForm: FunctionComponent<Props> = ({ redirectTo }) => {
+const LoginForm: FunctionComponent<Props> = props => {
+    const { redirectTo } = props;
     const [loading, setLoading] = useSafeSetState(false);
     const login = useLogin();
     const translate = useTranslate();
     const notify = useNotify();
-    const classes = useStyles({});
+    const classes = useStyles(props);
 
     const validate = (values: FormData) => {
         const errors = { username: undefined, password: undefined };

packages/ra-ui-materialui/src/auth/Logout.tsx

@@ -32,8 +32,14 @@ const useStyles = makeStyles(
 const LogoutWithRef: FunctionComponent<
     Props & MenuItemProps<'li', { button: true }> // HACK: https://github.com/mui-org/material-ui/issues/16245
 > = React.forwardRef(function Logout(props, ref) {
-    const { className, redirectTo, icon, ...rest } = props;
-    const classes = useStyles({}); // the empty {} is a temp fix for https://github.com/mui-org/material-ui/issues/15942
+    const {
+        className,
+        classes: classesOverride,
+        redirectTo,
+        icon,
+        ...rest
+    } = props;
+    const classes = useStyles(props);
     const translate = useTranslate();
     const logout = useLogout();
     // eslint-disable-next-line react-hooks/exhaustive-deps

packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.tsx

@@ -33,20 +33,23 @@ const useStyles = makeStyles(
     { name: 'RaBulkDeleteWithConfirmButton' }
 );
 
-const BulkDeleteWithConfirmButton: FC<BulkDeleteWithConfirmButtonProps> = ({
-    basePath,
-    classes: classesOverride,
-    confirmTitle,
-    confirmContent,
-    icon,
-    label,
-    onClick,
-    resource,
-    selectedIds,
-    ...rest
-}) => {
+const BulkDeleteWithConfirmButton: FC<
+    BulkDeleteWithConfirmButtonProps
+> = props => {
+    const {
+        basePath,
+        classes: classesOverride,
+        confirmTitle,
+        confirmContent,
+        icon,
+        label,
+        onClick,
+        resource,
+        selectedIds,
+        ...rest
+    } = props;
     const [isOpen, setOpen] = useState(false);
-    const classes = useStyles({ classes: classesOverride });
+    const classes = useStyles(props);
     const notify = useNotify();
     const unselectAll = useUnselectAll();
     const refresh = useRefresh();

packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.tsx

@@ -30,17 +30,18 @@ const useStyles = makeStyles(
     { name: 'RaBulkDeleteWithUndoButton' }
 );
 
-const BulkDeleteWithUndoButton: FC<BulkDeleteWithUndoButtonProps> = ({
-    basePath,
-    classes: classesOverride,
-    icon,
-    label,
-    onClick,
-    resource,
-    selectedIds,
-    ...rest
-}) => {
-    const classes = useStyles({ classes: classesOverride });
+const BulkDeleteWithUndoButton: FC<BulkDeleteWithUndoButtonProps> = props => {
+    const {
+        basePath,
+        classes: classesOverride,
+        icon,
+        label,
+        onClick,
+        resource,
+        selectedIds,
+        ...rest
+    } = props;
+    const classes = useStyles(props);
     const notify = useNotify();
     const unselectAll = useUnselectAll();
     const refresh = useRefresh();

packages/ra-ui-materialui/src/button/Button.tsx

@@ -26,19 +26,20 @@ import { useTranslate } from 'ra-core';
  * </Button>
  *
  */
-const Button: FC<ButtonProps> = ({
-    alignIcon = 'left',
-    children,
-    classes: classesOverride,
-    className,
-    color,
-    disabled,
-    label,
-    size,
-    ...rest
-}) => {
+const Button: FC<ButtonProps> = props => {
+    const {
+        alignIcon = 'left',
+        children,
+        classes: classesOverride,
+        className,
+        color,
+        disabled,
+        label,
+        size,
+        ...rest
+    } = props;
     const translate = useTranslate();
-    const classes = useStyles({ classes: classesOverride });
+    const classes = useStyles(props);
     const isXSmall = useMediaQuery((theme: Theme) =>
         theme.breakpoints.down('xs')
     );

packages/ra-ui-materialui/src/button/CreateButton.tsx

@@ -9,15 +9,16 @@ import { useTranslate } from 'ra-core';
 
 import Button, { ButtonProps } from './Button';
 
-const CreateButton: FC<CreateButtonProps> = ({
-    basePath = '',
-    className,
-    classes: classesOverride,
-    label = 'ra.action.create',
-    icon = defaultIcon,
-    ...rest
-}) => {
-    const classes = useStyles({ classes: classesOverride });
+const CreateButton: FC<CreateButtonProps> = props => {
+    const {
+        basePath = '',
+        className,
+        classes: classesOverride,
+        label = 'ra.action.create',
+        icon = defaultIcon,
+        ...rest
+    } = props;
+    const classes = useStyles(props);
     const translate = useTranslate();
     const isSmall = useMediaQuery((theme: Theme) =>
         theme.breakpoints.down('sm')

packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.tsx

@@ -26,26 +26,27 @@ import {
 import Confirm from '../layout/Confirm';
 import Button, { ButtonProps } from './Button';
 
-const DeleteWithConfirmButton: FC<DeleteWithConfirmButtonProps> = ({
-    basePath,
-    classes: classesOverride,
-    className,
-    confirmTitle = 'ra.message.delete_title',
-    confirmContent = 'ra.message.delete_content',
-    icon = defaultIcon,
-    label = 'ra.action.delete',
-    onClick,
-    record,
-    resource,
-    redirect: redirectTo = 'list',
-    ...rest
-}) => {
+const DeleteWithConfirmButton: FC<DeleteWithConfirmButtonProps> = props => {
+    const {
+        basePath,
+        classes: classesOverride,
+        className,
+        confirmTitle = 'ra.message.delete_title',
+        confirmContent = 'ra.message.delete_content',
+        icon = defaultIcon,
+        label = 'ra.action.delete',
+        onClick,
+        record,
+        resource,
+        redirect: redirectTo = 'list',
+        ...rest
+    } = props;
     const [open, setOpen] = useState(false);
     const translate = useTranslate();
     const notify = useNotify();
     const redirect = useRedirect();
     const refresh = useRefresh();
-    const classes = useStyles({ classes: classesOverride });
+    const classes = useStyles(props);
 
     const [deleteOne, { loading }] = useDelete(
         resource,

packages/ra-ui-materialui/src/button/DeleteWithUndoButton.tsx

@@ -16,19 +16,20 @@ import {
 
 import Button, { ButtonProps } from './Button';
 
-const DeleteWithUndoButton: FC<DeleteWithUndoButtonProps> = ({
-    label = 'ra.action.delete',
-    classes: classesOverride,
-    className,
-    icon = defaultIcon,
-    onClick,
-    resource,
-    record,
-    basePath,
-    redirect: redirectTo = 'list',
-    ...rest
-}) => {
-    const classes = useStyles({ classes: classesOverride });
+const DeleteWithUndoButton: FC<DeleteWithUndoButtonProps> = props => {
+    const {
+        label = 'ra.action.delete',
+        classes: classesOverride,
+        className,
+        icon = defaultIcon,
+        onClick,
+        resource,
+        record,
+        basePath,
+        redirect: redirectTo = 'list',
+        ...rest
+    } = props;
+    const classes = useStyles(props);
     const notify = useNotify();
     const redirect = useRedirect();
     const refresh = useRefresh();

packages/ra-ui-materialui/src/button/SaveButton.tsx

@@ -19,23 +19,24 @@ import {
     FormContext,
 } from 'ra-core';
 
-const SaveButton: FC<SaveButtonProps> = ({
-    className,
-    classes: classesOverride = {},
-    invalid,
-    label = 'ra.action.save',
-    pristine,
-    redirect,
-    saving,
-    submitOnEnter,
-    variant = 'contained',
-    icon = defaultIcon,
-    onClick,
-    handleSubmitWithRedirect,
-    onSave,
-    ...rest
-}) => {
-    const classes = useStyles({ classes: classesOverride });
+const SaveButton: FC<SaveButtonProps> = props => {
+    const {
+        className,
+        classes: classesOverride,
+        invalid,
+        label = 'ra.action.save',
+        pristine,
+        redirect,
+        saving,
+        submitOnEnter,
+        variant = 'contained',
+        icon = defaultIcon,
+        onClick,
+        handleSubmitWithRedirect,
+        onSave,
+        ...rest
+    } = props;
+    const classes = useStyles(props);
     const notify = useNotify();
     const translate = useTranslate();
     const { setOnSave } = useContext(FormContext);

packages/ra-ui-materialui/src/detail/Create.js

@@ -92,7 +92,7 @@ export const CreateView = props => {
         ...rest
     } = props;
     useCheckMinimumRequiredProps('Create', ['children'], props);
-    const classes = useStyles({ classes: classesOverride });
+    const classes = useStyles(props);
     return (
         <div
             className={classnames('create-page', classes.root, className)}