Add support for customization with MUI theme to fields and delete buttons

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

@@ -1,5 +1,10 @@
 import React, { Fragment, isValidElement, ReactEventHandler } from 'react';
 import ActionDelete from '@mui/icons-material/Delete';
+import {
+    ComponentsOverrides,
+    styled,
+    useThemeProps,
+} from '@mui/material/styles';
 import clsx from 'clsx';
 
 import { UseMutationOptions } from '@tanstack/react-query';
@@ -20,8 +25,13 @@ import { Button, ButtonProps } from './Button';
 import { humanize, singularize } from 'inflection';
 
 export const DeleteWithConfirmButton = <RecordType extends RaRecord = any>(
-    props: DeleteWithConfirmButtonProps<RecordType>
+    inProps: DeleteWithConfirmButtonProps<RecordType>
 ) => {
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX,
+    });
+
     const {
         className,
         confirmTitle: confirmTitleProp,
@@ -80,7 +90,7 @@ export const DeleteWithConfirmButton = <RecordType extends RaRecord = any>(
 
     return (
         <Fragment>
-            <Button
+            <StyledButton
                 onClick={handleDialogOpen}
                 label={label}
                 className={clsx('ra-delete-button', className)}
@@ -89,7 +99,7 @@ export const DeleteWithConfirmButton = <RecordType extends RaRecord = any>(
                 {...rest}
             >
                 {icon}
-            </Button>
+            </StyledButton>
             <Confirm
                 isOpen={open}
                 loading={isPending}
@@ -158,3 +168,29 @@ export interface DeleteWithConfirmButtonProps<
     resource?: string;
     successMessage?: string;
 }
+
+const PREFIX = 'RaDeleteWithConfirmButton';
+
+const StyledButton = styled(Button, {
+    name: PREFIX,
+    overridesResolver: (props, styles) => styles.root,
+})({});
+
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [PREFIX]: 'root';
+    }
+
+    interface ComponentsPropsList {
+        [PREFIX]: Partial<DeleteWithConfirmButtonProps>;
+    }
+
+    interface Components {
+        [PREFIX]?: {
+            defaultProps?: ComponentsPropsList[typeof PREFIX];
+            styleOverrides?: ComponentsOverrides<
+                Omit<Theme, 'components'>
+            >[typeof PREFIX];
+        };
+    }
+}

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

@@ -13,10 +13,20 @@ import {
 } from 'ra-core';
 
 import { Button, ButtonProps } from './Button';
+import {
+    ComponentsOverrides,
+    styled,
+    useThemeProps,
+} from '@mui/material/styles';
 
 export const DeleteWithUndoButton = <RecordType extends RaRecord = any>(
-    props: DeleteWithUndoButtonProps<RecordType>
+    inProps: DeleteWithUndoButtonProps<RecordType>
 ) => {
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX,
+    });
+
     const {
         label = 'ra.action.delete',
         className,
@@ -41,7 +51,7 @@ export const DeleteWithUndoButton = <RecordType extends RaRecord = any>(
     });
 
     return (
-        <Button
+        <StyledButton
             onClick={handleDelete}
             disabled={isPending}
             label={label}
@@ -51,7 +61,7 @@ export const DeleteWithUndoButton = <RecordType extends RaRecord = any>(
             {...rest}
         >
             {icon}
-        </Button>
+        </StyledButton>
     );
 };
 
@@ -73,3 +83,29 @@ export interface DeleteWithUndoButtonProps<
     resource?: string;
     successMessage?: string;
 }
+
+const PREFIX = 'RaDeleteWithUndoButton';
+
+const StyledButton = styled(Button, {
+    name: PREFIX,
+    overridesResolver: (props, styles) => styles.root,
+})({});
+
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [PREFIX]: 'root';
+    }
+
+    interface ComponentsPropsList {
+        [PREFIX]: Partial<DeleteWithUndoButtonProps>;
+    }
+
+    interface Components {
+        [PREFIX]?: {
+            defaultProps?: ComponentsPropsList[typeof PREFIX];
+            styleOverrides?: ComponentsOverrides<
+                Omit<Theme, 'components'>
+            >[typeof PREFIX];
+        };
+    }
+}

packages/ra-ui-materialui/src/field/DateField.stories.tsx

@@ -0,0 +1,47 @@
+import { Paper, Stack } from '@mui/material';
+import * as React from 'react';
+
+import { DateField, DateFieldProps } from './DateField';
+import { AdminContext } from '../AdminContext';
+import { defaultDarkTheme, defaultLightTheme } from '../theme';
+
+export default { title: 'ra-ui-materialui/fields/DateField' };
+
+export const Basic = ({
+    value,
+    theme,
+    ...props
+}: Partial<DateFieldProps> & { value?: Date | string; theme?: string }) => {
+    return (
+        <AdminContext
+            theme={theme === 'light' ? defaultLightTheme : defaultDarkTheme}
+        >
+            <Paper sx={{ p: 2 }}>
+                <Stack direction="row">
+                    <DateField record={{ value }} source="value" {...props} />
+                </Stack>
+            </Paper>
+        </AdminContext>
+    );
+};
+
+Basic.argTypes = {
+    value: {
+        options: ['now', 'string', 'empty', 'undefined'],
+        mapping: {
+            now: new Date(),
+            string: '2025-03-25 12:52:11',
+            empty: '',
+            undefined: undefined,
+        },
+        control: { type: 'select' },
+    },
+    theme: {
+        options: ['light', 'dark'],
+        control: { type: 'select' },
+    },
+};
+Basic.args = {
+    theme: 'light',
+    value: 'now',
+};

packages/ra-ui-materialui/src/field/DateField.tsx

@@ -1,5 +1,10 @@
 import * as React from 'react';
 import { Typography, TypographyProps } from '@mui/material';
+import {
+    ComponentsOverrides,
+    styled,
+    useThemeProps,
+} from '@mui/material/styles';
 import { useFieldValue, useTranslate } from 'ra-core';
 
 import { sanitizeFieldRestProps } from './sanitizeFieldRestProps';
@@ -33,8 +38,13 @@ import { genericMemo } from './genericMemo';
 const DateFieldImpl = <
     RecordType extends Record<string, any> = Record<string, any>,
 >(
-    props: DateFieldProps<RecordType>
+    inProps: DateFieldProps<RecordType>
 ) => {
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX,
+    });
+
     const {
         className,
         emptyText,
@@ -95,14 +105,14 @@ const DateFieldImpl = <
     }
 
     return (
-        <Typography
+        <StyledTypography
             component="span"
             variant="body2"
             className={className}
             {...sanitizeFieldRestProps(rest)}
         >
             {dateString}
-        </Typography>
+        </StyledTypography>
     );
 };
 DateFieldImpl.displayName = 'DateFieldImpl';
@@ -136,3 +146,29 @@ const toLocaleStringSupportsLocales = (() => {
     }
     return false;
 })();
+
+const PREFIX = 'RaDateField';
+
+const StyledTypography = styled(Typography, {
+    name: PREFIX,
+    overridesResolver: (props, styles) => styles.root,
+})({});
+
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [PREFIX]: 'root';
+    }
+
+    interface ComponentsPropsList {
+        [PREFIX]: Partial<DateFieldProps>;
+    }
+
+    interface Components {
+        [PREFIX]?: {
+            defaultProps?: ComponentsPropsList[typeof PREFIX];
+            styleOverrides?: ComponentsOverrides<
+                Omit<Theme, 'components'>
+            >[typeof PREFIX];
+        };
+    }
+}

packages/ra-ui-materialui/src/field/EmailField.stories.tsx

@@ -0,0 +1,46 @@
+import { Paper, Stack } from '@mui/material';
+import * as React from 'react';
+
+import { EmailField, EmailFieldProps } from './EmailField';
+import { AdminContext } from '../AdminContext';
+import { defaultDarkTheme, defaultLightTheme } from '../theme';
+
+export default { title: 'ra-ui-materialui/fields/EmailField' };
+
+export const Basic = ({
+    value,
+    theme,
+    ...props
+}: Partial<EmailFieldProps> & { value?: string; theme?: string }) => {
+    return (
+        <AdminContext
+            theme={theme === 'light' ? defaultLightTheme : defaultDarkTheme}
+        >
+            <Paper sx={{ p: 2 }}>
+                <Stack direction="row">
+                    <EmailField record={{ value }} source="value" {...props} />
+                </Stack>
+            </Paper>
+        </AdminContext>
+    );
+};
+
+Basic.argTypes = {
+    value: {
+        options: ['filled', 'empty', 'undefined'],
+        mapping: {
+            filled: 'test@test.test',
+            empty: '',
+            undefined: undefined,
+        },
+        control: { type: 'select' },
+    },
+    theme: {
+        options: ['light', 'dark'],
+        control: { type: 'select' },
+    },
+};
+Basic.args = {
+    theme: 'light',
+    value: 'filled',
+};

packages/ra-ui-materialui/src/field/EmailField.tsx

@@ -1,6 +1,11 @@
 import * as React from 'react';
 import Typography from '@mui/material/Typography';
 import { Link, LinkProps } from '@mui/material';
+import {
+    ComponentsOverrides,
+    styled,
+    useThemeProps,
+} from '@mui/material/styles';
 import { useFieldValue, useTranslate } from 'ra-core';
 
 import { sanitizeFieldRestProps } from './sanitizeFieldRestProps';
@@ -10,8 +15,13 @@ import { genericMemo } from './genericMemo';
 const EmailFieldImpl = <
     RecordType extends Record<string, any> = Record<string, any>,
 >(
-    props: EmailFieldProps<RecordType>
+    inProps: EmailFieldProps<RecordType>
 ) => {
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX,
+    });
+
     const { className, emptyText, ...rest } = props;
     const value = useFieldValue(props);
     const translate = useTranslate();
@@ -30,15 +40,15 @@ const EmailFieldImpl = <
     }
 
     return (
-        <Link
+        <StyledLink
             className={className}
             href={`mailto:${value}`}
             onClick={stopPropagation}
             variant="body2"
             {...sanitizeFieldRestProps(rest)}
         >
             {value}
-        </Link>
+        </StyledLink>
     );
 };
 EmailFieldImpl.displayName = 'EmailFieldImpl';
@@ -52,3 +62,29 @@ export interface EmailFieldProps<
 
 // useful to prevent click bubbling in a Datagrid with rowClick
 const stopPropagation = e => e.stopPropagation();
+
+const PREFIX = 'RaEmailField';
+
+const StyledLink = styled(Link, {
+    name: PREFIX,
+    overridesResolver: (props, styles) => styles.root,
+})({});
+
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [PREFIX]: 'root';
+    }
+
+    interface ComponentsPropsList {
+        [PREFIX]: Partial<EmailFieldProps>;
+    }
+
+    interface Components {
+        [PREFIX]?: {
+            defaultProps?: ComponentsPropsList[typeof PREFIX];
+            styleOverrides?: ComponentsOverrides<
+                Omit<Theme, 'components'>
+            >[typeof PREFIX];
+        };
+    }
+}